用dl模拟实现可自定义样式的SELECT下拉列表(已封装)

通过dl模拟实现SELECT下拉列表. 其实这是项目中要常用到的一个效果, 于是, 在之前写的基础上封装成了一个插件. 可自定义样式, 可防止用户本意划过时触发事件.
具体思路就不说了,比较常规, 代码中也有注释. 使用方法也不费话了, 就是一个简单的全局函数封装, 不懂的看下源码中注释或Google.
另外, 有兴趣的朋友,可以尝试在本插件基础上改一个可输入的下拉列表. 思路差不多,哈.
演示及代码: 点此查看DEMO

; ( function ( $ ){
    $. fn . extend ({
         iSelect : function ( options ){
             var iset = {
                 name : $ ( ' .selectitem ' ) , //容器
                 select : $ ( ' .selectitem>dl ' ) , //dl列表
                 dropCss : ' drop ' , //收藏状态dt的样式
                 shrinkCss : ' shrink ' , //展开状态dt的样式
                 hoverCss : ' hover ' , //鼠标划过dd时的样式
                 clearTime : 100 , //允许用户快速划过不触发的时间(ms)
                 dropTime : 100 , //展开时间(ms)
                 shrinkTime : 100 //收缩时间(ms)
             }
             options = options || {} ;
            $. extend ( iset , options ) ;
             var mainHeight = iset . name . height () ; //容器高度
             var selectHeight = iset . select . height () ; //dl实际高度
             var curTxt = iset . select . find ( ' dt ' ) . html () ; //dt默认html内容
             var self = null ;
             var hoverElem = null ; //避免用户快速划过时触发事件
             iset . name . each ( function (){
                $ ( this ) . hover ( function (){
                     self = this ;
                     hoverElem = setTimeout ( function (){
                        $ ( self ) . stop ( true , false ) . animate ({ //鼠标划过时,展开dl
                             height : selectHeight
                         } , iset . dropTime ) ;
                         if ( $ ( self ) . find ( ' dt ' ) . html () == curTxt ) { //判断是否有选择下拉列表,若无则改变dt样式
                            $ ( self ) . find ( ' dt ' ) . attr ( ' class ' , iset . dropCss ) ;
                         }
                         //dd的鼠标事件
                        $ ( self ) . find ( ' dd ' ) . mouseover ( function (){
                            $ ( this ) . addClass ( iset . hoverCss ) . siblings () . removeClass ( iset . hoverCss ) ;
                         }) . mousedown ( function (){ //鼠标点击时取值并赋给dt
                            $ ( self ) . find ( ' dt ' ) . html ( $ ( this ) . html ()) . attr ( ' class ' , $ ( this ) . attr ( ' class ' )) ;
                            $ ( self ) . stop ( true , false ) . animate ({
                                 height : mainHeight
                             } , iset . shrinkTime ) ;
                         }) . removeClass ( iset . hoverCss ) ;
                     } , iset . clearTime ) ;
                 } , function (){
                     //鼠标移出后触发的事件
                     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 ) ;

原文发布于Mr.Think的博客: http://mrthink.net/jquery-plugin-iselect/ 转载请注明出处

转载于:https://www.cnblogs.com/mrthink/archive/2010/11/02/1867445.html