Yui: различия между версиями

Содержимое удалено Содержимое добавлено
Нет описания правки
Нет описания правки
Строка 247:
</source>
 
<h3><span>AutoComplete (Автозавершение)</span></h3>
'''Постепенное исчезновение обьекта:'''
<source lang="javascript">
<!-- секция "1" -->
<style type="text/css">
#statesautocomplete,
#statesautocomplete2 {
width:15em;
padding-bottom:2em;
}
#statesautocomplete {
z-index:9000;
}
#statesinput,
#statesinput2 {
_position:absolute;
}
</style>
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/animation/animation.js"></script>
<script type="text/javascript" src="yui/build/autocomplete/autocomplete.js"></script>
<!-- секция "1" -->
 
<!-- секция "2" -->
<h3>Find a state:</h3>
<div id="statesautocomplete">
<input id="statesinput" type="text">
<div id="statescontainer"></div>
</div>
<h3>Find an area code</h3>
<div id="statesautocomplete2">
<input id="statesinput2" type="text">
<div id="statescontainer2"></div>
</div>
<script type="text/javascript">
YAHOO.example.statesArray = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana"
];
 
YAHOO.example.areacodesArray = [
["201", "New Jersey"],
["202", "Washington, DC"],
["203", "Connecticut"],
["204", "Manitoba, Canada"],
["205", "Alabama"],
["206", "Washington"],
["207", "Maine"],
["208", "Idaho"],
["209", "California"],
["210", "Texas"],
["212", "New York"],
["213", "California"],
["214", "Texas"]
];
 
YAHOO.example.ACJSArray = new function() {
// Instantiate first JS Array DataSource
this.oACDS = new YAHOO.widget.DS_JSArray(YAHOO.example.statesArray);
 
// Instantiate first AutoComplete
this.oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', this.oACDS);
this.oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
this.oAutoComp.typeAhead = true;
this.oAutoComp.useShadow = true;
this.oAutoComp.minQueryLength = 0;
this.oAutoComp.textboxFocusEvent.subscribe(function(){
var sInputValue = YAHOO.util.Dom.get('statesinput').value;
if(sInputValue.length === 0) {
var oSelf = this;
setTimeout(function(){oSelf.sendQuery(sInputValue);},0);
}
});
// Instantiate second JS Array DataSource
this.oACDS2 = new YAHOO.widget.DS_JSArray(YAHOO.example.areacodesArray);
 
// Instantiate second AutoComplete
this.oAutoComp2 = new YAHOO.widget.AutoComplete('statesinput2','statescontainer2', this.oACDS2);
this.oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
this.oAutoComp2.typeAhead = true;
this.oAutoComp2.useShadow = true;
this.oAutoComp2.forceSelection = true;
this.oAutoComp2.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
};
</script>
<!-- секция "2" -->
</source>