jquery mimic select Drop-down List effect code

jquery mimic select Drop-down List effect code

The Select Drop-down list is implemented through a DL simulation. In fact, this is a project to be commonly used in an effect, so, on the basis of the previous written packaging into a plug-in. Customizable styles to prevent events from being triggered when the user is intent on passing.
The concrete idea does not say, compares the general, the Code also has the annotation. The use of the method is also not crap, is a simple global function encapsulation, do not understand the source of the comments or Google.
In addition, interested friends, you can try to change on the basis of this plugin can be entered a drop-down list

<style>
#demo {position:relative;width:500px;height:300px;border:1px solid #ccc}
#demo dl.tips Tutorial { Margin:2px;padding:8px;background: #f2f2f2 line-height:24px}
#demo dl.tips dt{font-size:14px;font-weight: Bolder}
#demo dl.tips dd{text-indent:24px}
#demo dl.tips dd input{padding:5px 5px;border:1px #444; width : 200px;}
. selecttagbox{position:absolute;top:170px;left:50%;margin-left:-120px;z-index:999}
. selectitem{overflow : Hidden;width:180px;height:30px;background: #dff0f0; Font-size:14px;line-height:30px;filter:alpha (opacity:80); o Pacity:0.8;cursor:pointer}
. selectitem dt,.selectitem dd{padding-left:28px;background:transparent URL (yun_qi_ Img/20101031sprite.png) 30px 0 no-repeat}
. selectitem dt.drop{background-position:0 -30px;
. SelectItem dt.shrink{background-position:0 0}
. SelectItem dd.hover{background-color: #b6e2e2}

. SelectItem dl. tag_news{background-position:0 -60px;color: #bd0000}
. SelectItem dl. tag_it{background-position:0 -90px;color: #0759e0}
. SelectItem dl. tag_reading{background-position:0 -120px;color: #409513}
. SelectItem dl. tag_interests{background-position:0 -150px;color: #ee7d0e}
. SelectItem dl. tag_career{background-position:0 -180px;color: #000382}
. SelectItem dl. tag_living{background-position:0 -210px;color: #733900}
. SelectItem dl. tag_sports{background-position:0 -240px;color: #9b018b}

#demo. demo_b{top:210px;margin-left:-90px;z-index:888}
#demo. demo_c{top:250px;margin-left:-60px;z-index:777}
</style>

<div id= "Demo"
<dl class= "Tips"
<dt> using DL simulation to implement a customizable style of select Drop-down list </dt>
<dd >1. Fully consider the user experience, fast across does not trigger; </dd>
<dd>2. You can customize various styles according to your requirements; Consider the background program, reservation transfer interface;</dd>
<dd>4. If you are interested, you can also improve into a drop-down list of values that can be entered and pulled down. </DD>&NBSP
<dd><strong> Drop-down list values are reached here </ Strong><input id= "Selectval"/><!--drop-down list to the value here--></dd>
</dl>

<div class= "Selecttagbox"
<div class= "SelectItem"
         <DL>
   <dt class= "Shrink" > Please select label category </dt>
   <dd class= "Tag_news" > Current affairs &nbsp; News </dd>
   <dd class= "tag_it" > Technology Internet &nbsp; New gadgets </dd>
   <dd class= "tag_reading" > Reading &nbsp; music &nbsp; film </dd>
    <dd class= "tag_interests" > Interest &nbsp; hobby &nbsp; activity </dd>
   <dd class= "Tag_career" > Career &nbsp; financial </dd>
   <dd class= "tag_living" > Life &nbsp; Emotional </dd>
   <dd class= "Tag_sports" > Entertainment &nbsp; Sports </dd>
  </ Dl>
</div>
</div>

<div class= "Selecttagbox demo_b"
<div class= "SelectItem"
         <dl>
   <dt class= "Shrink" > Please select label category </dt>
    <dd class= "Tag_news" > Current affairs &nbsp; News </dd>
   <dd class= "tag_it" > Technology Internet & A new gadget </dd>
   <dd class= "tag_reading" > Reading &nbsp; music &nbsp; film </dd>
   <dd class= "tag_interests" > Interests &nbsp; Hobbies &nbsp; Activities </dd>
    <dd class= "Tag_career" > Career &nbsp; financial </dd>
   <dd class= "tag_living" > Life &nbsp; Emotion </dd>
   <dd class= "Tag_sports" > Entertainment &nbsp; Sports </dd>
   </dl>
</div>
</div>

<div class= "Selecttagbox demo_c"
<div class= "SelectItem"
         <dl>
   <dt class= "Shrink" > Please select label category </dt>
    <dd class= "Tag_news" > Current affairs &nbsp; News </dd>
   <dd class= "tag_it" > Technology Internet & A new gadget </dd>
   <dd class= "tag_reading" > Reading &nbsp; music &nbsp; film </dd>
   <dd class= "tag_interests" > Interests &nbsp; Hobbies &nbsp; Activities </dd>
    <dd class= "Tag_career" > Career &nbsp; financial </dd>
   <dd class= "tag_living" > Life &nbsp; Emotion </dd>
   <dd class= "Tag_sports" > Entertainment &nbsp; Sports </dd>
   </dl>
</div>
</div>

</div>
<!--demo End-->
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></script>
<script>

;(function ($) {
$.fn.extend ({
Iselect:function (options) {
var Iset = {
Name: $ ('. SelectItem '),//container
Select: $ ('. Selectitem>dl '),//DL list
Dropcss Tutorial: ' Drop ',//favorites Status DT style
SHRINKCSS: ' shrink ',//expand state DT's style
Hovercss: ' hover ',///The style of the mouse across DD
CLEARTIME:100,//allow users to quickly across the time without triggering (MS)
DROPTIME:100,//expansion time (MS)
SHRINKTIME:100,//Shrink time (ms)
selectval:null//the selected value into this element
}
Options=$.extend (iset, Options | | {});
var mainheight = Iset.name.height ();//Container height
var selectheight = Iset.select.height (); DL actual Height
var curtxt = iset.select.find (' dt '). html (); DT Default HTML content
var self = null;
var hoverelem = null; To avoid triggering events when a user is quickly passing across
Iset.name.each (function () {
$ (this). Hover (function () {
self = this;
Hoverelem = settimeout (function () {
$ (self). Stop (True, false). Animate ({///mouse across, expand DL
Height:selectheight
}, Iset.droptime);
if ($ (self). Find (' DT '). html () = = Curtxt) {//Determine if there is a select Drop-down list, and if not, change the DT style
$ (self). Find (' DT '). attr (' class ', iset.dropcss);
}
Mouse events for DD
$ (self). Find (' DD '). Mouseo Tutorial ver (function () {
$ (this). addclass (ISET.HOVERCSS). Siblings (). Removeclass (ISET.HOVERCSS);
}). MouseDown (function () {//mouse clicks and assigns to DT
$ (self). Find (' DT '). HTML ($ (a). html ()). attr (' class ', $ (this). attr (' class '));
Conveys value for table
if (iset.selectval) {
Iset.selectval.val ($ (this). html ());
}
$ (self). Stop (True, false). Animate ({
Height:mainheight
}, Iset.shrinktime);
}). Removeclass (ISET.HOVERCSS);
}, Iset.cleartime);
}, function () {
Events triggered after mouse move out
Cleartimeout (Hoverelem);
$ (self). Stop (True, false). Animate ({
Height:mainheight
}, Iset.shrinktime);
if ($ (self). Find (' DT '). html () = = Curtxt) {
$ (self). Find (' DT '). attr (' class ', iset.shrinkcss);
}
});
})
}
})
}) (jquery);
How to use
$ (function () {
The default call
$ (' #demo '). iselect ({selectval:$ (' Input#selectval ')});

Calling methods for passing in custom values
$ ('. Demo_a ') ({
name:$ (' Yourcss '),
Select: $ ('. Yourcss>dl '),
Dropcss: ' Yourdrop ',
Shrinkcss: ' Yourshrink ',
Hovercss: ' Yourhover ',
CLEARTIME:200,
DROPTIME:200,
SHRINKTIME:200,
selectval:$ (' input ')
// });
})
</script>