JS插件——自定義下拉框

HTML的原生select标簽，很多東西改不了，限制太大，不同的浏覽器顯示的樣式還不一樣，尤其是當需要相容IE7、IE8時問題更多，想做一個美觀的下拉框，最終還是得自定義來實作。

效果圖：

這裡沒有做過多的美化，需求就是要這麼個簡潔的。當然，大小、顔色、箭頭圖示等等隻要能看見的都可以修改，隻需要改CSS就OK，這裡就不展示了。

思路：

通過ul、li标簽來仿下拉框，CSS控制樣式，JS封裝插件。

<span  style="margin-left:6px;margin-right:6px;">
                <ul class="nav off">
                    <li><span data-role="select-able"><span class="arraw"><s>&nbsp;</s>&nbsp;</span><span class="text text-top">全部</span>
                    </span>
                        <ul class="scroll-bar sub sub1" style="border-top: 0;">
                        </ul>
                    </li>
                </ul>
</span>
           

CSS控制樣式

.nav{background-color:#fff;display:inline-block; width:px; height:px; line-height:px;border:solid px black;*zoom: ;*display: inline; text-align:left; vertical-align:middle; cursor:pointer;}
.nav > li{
 height:px; line-height:px;vertical-align:middle; max-height:px; *zoom: ;*display: inline; }
.nav > li > span{
 vertical-align:middle; padding:; white-space: nowrap;}
.nav > li > span > .text
{
    position: absolute;
    background-color: transparent;
    clear:both;
    display:block;
    margin-left:px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-style:normal;
    font-weight:normal;
    color:black;
    font-family:"微軟雅黑 Regular", "微軟雅黑";
    font-size:px;
    float:left;
    width:px;
    height: px;
}
.nav > li > span > .arraw
{
    clear:both;
    display:block;
    width:px;
    height:px;
    line-height:px;
    float:right;
    vertical-align:middle;
    text-align:center;

}

.nav > li > span > .arraw > s
{
    display:block;
    background:url(../image/selectArrow.png) no-repeat  ;
    width:px;
    height:px;
    margin-top:px;
}

.nav.off > li > span > .arraw > s
{
    display:block;
    background:url(../image/selectArrow.png) no-repeat  ;
    width:px;
    height:px;
    /*line-height:9px;*/
    margin-top:px;
}

.sub
{
    background-color:#fff;
    width:px;
    position: fixed;
    overflow: hidden;
    max-height: px;
    overflow-y: auto;
    border: px solid black;
    z-index: ;
    color:#fff;
}
.sub li
{

    cursor:pointer;
    height:px;
    line-height:px;
    margin-left: ;
    vertical-align:middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-style:normal !important;
    font-weight:normal !important;
    color:black;
    font-family:"微軟雅黑 Regular", "微軟雅黑";
    font-size:px;
}
.sub li:hover
{
    background-color:#1698d6;
    color:#ffffff;
}

.sub li span{vertical-align:middle; padding:px; white-space: nowrap;}
.sub li span .text
{
    clear:both;
    display:block;
    margin-left:px;
    overflow: hidden;

    float:left;
}

.sub li span .arraw
{
    clear:both;
    display:block;
    width:px;
    height:px;
    line-height:px;
    float:right;
    vertical-align:middle;
    text-align:center;
}

.sub li span .arraw s
{
    display:block;
    background:url(../image/selectArrow.png) no-repeat -px px;
    width:px;
    height:px;
    /*line-height:7px;*/
    margin-top:px;
}

.off .sub
{
    display:none;
}
           

JS封裝插件

;(function($,window,document,undefined){

        /*
    *定義Select構造函數
    */
    var Select=function(ele,opt){
        this.$element=ele,
        this.defaults={
            Items:undefined,//下拉框綁定的資料源 Key Value對象
            SelectedValue:undefined,
            SelectedValueName:undefined,
            SelectedLevel:undefined,
            SelectChanged:undefined
        },
        this.options=$.extend({},this.defaults,opt)
    }

    Select.prototype={
        //初始化
        init:function(){
            var $this=this;
            if($this.SelectedValue==null
            ||$this.SelectedValue==undefined)
                $this.SelectedValue="";
            $this.$element.attr("data-role","select");
            $this.BindHideEvent();

            if($this.$element.parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]').length<){
                $('<ul class="scroll-bar sub" style="display:none;" data-sub-select-for="'+$this.$element.attr("data-id")+'"></ul>').insertAfter($this.$element)
                .css({'overflow-y:':'auto'})
                .attr('data-id','content'+$this.$element.attr('data-id'));
            }else{
                $this.$element.parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]')
                .css({'overflow-y:':'auto'})
                .attr('data-id','content'+$this.$element.attr('data-id'));
            }

            return this.$element.each(function(){
                var $select=$(this);
                $this.BindItems($select);
                $this.InitShowEvent($select);  
                $select=null;
            });
        },

        BindItems:function($select){
            var $this=this;
            var $ul=$select.find("ul.sub:first");
            $select.attr("data-selected-value","");
            $ul.empty()
            .width($this.$element.width())
            .css({'overflow-y:':'auto'})
            .attr('data-id','content'+$this.$element.attr('data-id'));

            var items=$this.options.Items;
            if(items==undefined||items==null||items.length<)return;
            for(var i=;i<items.length;++i){
                var data=items[i];
                var $li=$("<li class=\"\"></li>");
                $li.attr("data-id",data.Id);
                $li.attr("data-level",);
                $li.attr("title",data.Name);
                $li.attr("data-children",JSON.stringify(data.Children));
                if(data.Children!=null&&data.Children.length>){
                    $li.html("<span><span class=\"arraw\"><s>&nbsp;</s>&nbsp;</span><span class=\"text\">"+data.Name+"</span></span>"); 
                }
                else{
                    $li.html("<span><span class=\"text\">"+data.Name+"</span></span>");
                }
                $ul.append($li);
                $li.unbind("mousedown").mousedown(function(){
                    $this.HideUL();
                    $this.$element.attr("data-selected-level",$(this).attr("data-level"));
                    $this.$element.attr("data-selected-value",$(this).attr("data-id")).find("li>span>.text-top").text($(this).find(".text").text());
                    $this.RaiseSelectChanged($(this).attr("data-level"),$(this).attr("data-id"));
                });

                if(data.Children!=null&&data.Children.length>){
                    $li.unbind("mouseenter").mouseenter(function(){
                        var offset=$(this).offset();

                        var $ul2=$this.$element.parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]:first').empty();
                        var list=JSON.parse($(this).attr("data-children"));
                        if(list==null)return;

                        for(var j=;j<list.length;++j)
                        {
                            var data2=list[j];
                            var $li2=$("<li class=\"\"></li>");
                            $li2.attr("data-id",data2.Id);
                            $li2.attr("data-level",);
                            $li2.attr("title",data2.Name);
                            $li2.html("<span><span class=\"text\">"+data2.Name+"</span></span>");
                            $ul2.append($li2);
                            $li2.unbind("mousedown").mousedown(function(){
                                $this.HideUL();
                                $this.$element.attr("data-selected-level",$(this).attr("data-level"));
                                $this.$element.attr("data-selected-value",$(this).attr("data-id")).find("li>span>.text-top").text($(this).find(".text").text());

                                $this.RaiseSelectChanged($(this).attr("data-level"),$(this).attr("data-id"));
                            });

                            $li2=null;
                            data2=null;
                        }
                        list=null;

                        if($ul2.height()>$(window).height()-){
                            $ul2.height($(window).height()-);
                        }

                        if(offset.top+$ul2.height()>$(window).height()){
                            $ul2.css({left:(offset.left+$ul.width()-)+'px',top: +'px' }).show();
                        }else{
                            $ul2.css({left:(offset.left+$ul.width()-)+'px',top: offset.top+'px' }).show();
                        }

                        $ul2=null;
                    });
                }else{
                    $li.unbind("mouseenter").mouseenter(function(){
                        $this.$element.parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]:first').hide();
                    });
                }

                data=null;
                $li=null;
            }


            if($this.SelectedValue==undefined||$this.SelectedValue==null||$this.SelectedValue.length<){
                $select.attr("data-selected-level","0");
                $select.attr("data-selected-value",items[].Id).find("li>span>.text-top").text(items[].Name);
            }else{
                $select.attr("data-selected-level",$this.SelectedLevel);
                $select.attr("data-selected-value",$this.SelectedValue).find("li>span>.text-top").text($this.SelectedValueName);
            }

            $this.options.Items=null;          
        },
        //初始化顯示事件
        InitShowEvent:function($select){
            var $this=this;
            $select.find("li>span[data-role=\"select-able\"]").unbind("click").click(function(e){
                if($select.hasClass("off")){
                    var offset=$select.offset();

                    var $ul=$select.find("ul.sub:first");
                    if(offset.top+$select.height()+$ul.height()>$(document).height()-offset.top-$select.height()-){
                        $ul.height($(document).height()-offset.top-$select.height()-);
                    }
                    $ul=null;

                    $select.find("ul.sub").css({ left: offset.left, top: offset.top+$select.height() });
                    $select.removeClass("off");

                }else{
                    $this.HideUL();
                }
                e.stopPropagation();
            });
        },
        //綁定隐藏事件
        BindHideEvent:function(){
            var $this=this;
            if(typeof($this.$element.attr("data-id"))=="undefined"){
                $this.$element.attr("data-id",$this.guid());
            }

            if(typeof($(document).attr('select_'+$this.$element.attr('data-id')))=="undefined"){
                $(document).attr('select_'+$this.$element.attr('data-id'),'');
                $(document).bind("mousedown",function(event){
                    var node = event.target;
                    if(typeof($(node).attr('data-id'))!='undefined'){
                        if($(node).attr('data-id')=='content'+$this.$element.attr('data-id')){
                            event.stopPropagation();
                            return;
                        }
                    }
                    $this.HideUL();
                });
            }
        },
        //隐藏
        HideUL:function(){
            var $this=this;
            $this.$element.removeClass("off").addClass("off").parent().children('ul[data-sub-select-for="'+$this.$element.attr('data-id')+'"]').eq().empty().hide();
        },
        //選中的值修改時觸發
        RaiseSelectChanged:function(level,selectedValue){
            if(this.options.SelectChanged==undefined||this.options.SelectChanged==null)return;
            this.options.SelectChanged(level,selectedValue);
            return;
        }
    }

    /*
    *封裝為Select插件
    */
    $.fn.select=function(options){

        //建立Beautifier的實體
        var obj = new Select(this, options);

        //調用其方法
        return obj.init();
    };

    /*
    *擷取下拉框選中的值
    */
    $.fn.selectedValue=function(){
        return this.attr("data-selected-value");
    };


})(jQuery,window,document);
           

初始化下拉框：

$(".nav.off").select({
        Items:[{"Id":"A","Name":"A","":"Children"},{"Id":"B","Name":"B","":"Children"},{"Id":"C","Name":"C","":"Children"}],
        SelectedValue:"B",
        SelectedValueName:"B"
        SelectChanged:function(level,selectedValue){
            //code
        }
    });