mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-14 13:33:14 +00:00
195 lines
6.6 KiB
HTML
195 lines
6.6 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<title>Combobox, with CSS for Multiple Stacked Instances</title>
|
|
|
|
<style type="text/css">
|
|
/*margin and padding on body element
|
|
can introduce errors in determining
|
|
element position and are not recommended;
|
|
we turn them off as a foundation for YUI
|
|
CSS treatments. */
|
|
body {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
|
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
|
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
|
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
|
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
|
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
|
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
|
|
|
|
|
<!--begin custom header content for this example-->
|
|
<style type="text/css">
|
|
/* custom styles for inline instances */
|
|
.yui-skin-sam .yui-ac-input { position:static;width:20em; vertical-align:middle;}
|
|
.yui-skin-sam .yui-ac-container { width:20em;left:0px;}
|
|
|
|
/* needed for stacked instances for ie & sf z-index bug of absolute inside relative els */
|
|
#bAutoComplete { z-index:9001; }
|
|
#lAutoComplete { z-index:9000; }
|
|
|
|
/* buttons */
|
|
.yui-ac .yui-button {vertical-align:middle;}
|
|
.yui-ac .yui-button button {background: url(../autocomplete/assets/img/ac-arrow-rt.png) center center no-repeat }
|
|
.yui-ac .open .yui-button button {background: url(../autocomplete/assets/img/ac-arrow-dn.png) center center no-repeat}
|
|
</style>
|
|
|
|
|
|
<!--end custom header content for this example-->
|
|
|
|
</head>
|
|
|
|
<body class="yui-skin-sam">
|
|
|
|
|
|
<h1>Combobox, with CSS for Multiple Stacked Instances</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>This "combo box" AutoComplete implementation allows the user to pick an item from a set list or enter a custom value directly into the input field. Please note the following custom CSS:</p>
|
|
|
|
<ul>
|
|
<li>z-index has been applied to support multiple vertically stacked AutoComplete instances</li>
|
|
<li>the input field and container have been styled to support a button inline to the right</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<label for="bInput">What would you like for breakfast?</label>
|
|
<div id="bAutoComplete">
|
|
<input id="bInput" type="text"> <span id="toggleB"></span>
|
|
<div id="bContainer"></div>
|
|
</div>
|
|
|
|
<label for="lInput">What would you like for lunch?</label>
|
|
<div id="lAutoComplete">
|
|
<input id="lInput" type="text"> <span id="toggleL"></span>
|
|
<div id="lContainer"></div>
|
|
</div>
|
|
|
|
<label for="dInput">What would you like for dinner?</label>
|
|
<div id="dAutoComplete">
|
|
<input id="dInput" type="text"> <span id="toggleD"></span>
|
|
<div id="dContainer"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="assets/js/data.js"></script>
|
|
<script type="text/javascript">
|
|
YAHOO.example.Combobox = function() {
|
|
// Instantiate DataSources
|
|
var bDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.breakfasts);
|
|
var lDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.lunches);
|
|
var dDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.dinners);
|
|
|
|
// Instantiate AutoCompletes
|
|
var oConfigs = {
|
|
prehighlightClassName: "yui-ac-prehighlight",
|
|
useShadow: true,
|
|
queryDelay: 0,
|
|
minQueryLength: 0,
|
|
animVert: .01
|
|
}
|
|
var bAC = new YAHOO.widget.AutoComplete("bInput", "bContainer", bDS, oConfigs);
|
|
var lAC = new YAHOO.widget.AutoComplete("lInput", "lContainer", lDS, oConfigs);
|
|
var dAC = new YAHOO.widget.AutoComplete("dInput", "dContainer", dDS, oConfigs);
|
|
|
|
// Breakfast combobox
|
|
var bToggler = YAHOO.util.Dom.get("toggleB");
|
|
var oPushButtonB = new YAHOO.widget.Button({container:bToggler});
|
|
var toggleB = function(e) {
|
|
//YAHOO.util.Event.stopEvent(e);
|
|
if(!YAHOO.util.Dom.hasClass(bToggler, "open")) {
|
|
YAHOO.util.Dom.addClass(bToggler, "open")
|
|
}
|
|
|
|
// Is open
|
|
if(bAC.isContainerOpen()) {
|
|
bAC.collapseContainer();
|
|
}
|
|
// Is closed
|
|
else {
|
|
bAC.getInputEl().focus(); // Needed to keep widget active
|
|
setTimeout(function() { // For IE
|
|
bAC.sendQuery("");
|
|
},0);
|
|
}
|
|
}
|
|
oPushButtonB.on("click", toggleB);
|
|
bAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(bToggler, "open")});
|
|
|
|
// Lunch combobox
|
|
var lToggler = YAHOO.util.Dom.get("toggleL");
|
|
var oPushButtonL = new YAHOO.widget.Button({container:lToggler});
|
|
var toggleL = function(e) {
|
|
//YAHOO.util.Event.stopEvent(e);
|
|
if(!YAHOO.util.Dom.hasClass(lToggler, "open")) {
|
|
YAHOO.util.Dom.addClass(lToggler, "open")
|
|
}
|
|
|
|
// Is open
|
|
if(lAC.isContainerOpen()) {
|
|
lAC.collapseContainer();
|
|
}
|
|
// Is closed
|
|
else {
|
|
lAC.getInputEl().focus(); // Needed to keep widget active
|
|
setTimeout(function() { // For IE
|
|
lAC.sendQuery("");
|
|
},0);
|
|
}
|
|
}
|
|
oPushButtonL.on("click", toggleL);
|
|
lAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(lToggler, "open")});
|
|
|
|
// Dinner combobox
|
|
var dToggler = YAHOO.util.Dom.get("toggleD");
|
|
var oPushButtonD = new YAHOO.widget.Button({container:dToggler});
|
|
var toggleD = function(e) {
|
|
//YAHOO.util.Event.stopEvent(e);
|
|
if(!YAHOO.util.Dom.hasClass(dToggler, "open")) {
|
|
YAHOO.util.Dom.addClass(dToggler, "open")
|
|
}
|
|
|
|
// Is open
|
|
if(dAC.isContainerOpen()) {
|
|
dAC.collapseContainer();
|
|
}
|
|
// Is closed
|
|
else {
|
|
dAC.getInputEl().focus(); // Needed to keep widget active
|
|
setTimeout(function() { // For IE
|
|
dAC.sendQuery("");
|
|
},0);
|
|
}
|
|
}
|
|
oPushButtonD.on("click", toggleD);
|
|
dAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(dToggler, "open")});
|
|
|
|
return {
|
|
bDS: bDS,
|
|
bAC: bAC,
|
|
lDS: lDS,
|
|
lAC: lAC,
|
|
dDS: dDS,
|
|
dAC: dAC
|
|
};
|
|
}();
|
|
</script>
|
|
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
</body>
|
|
</html>
|