用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/ 转载请注明出处