依赖jquery的select皮肤2

这个下拉菜单存在于body中，不会受select父级overflow的影响，同样依赖于jquery。

缺陷是如果select上的样式不是定义在class上的，不能完全获取select上的样式。

不过，皮肤的样式可以通过css来修改。

直接上代码：

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select 皮肤</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div class="mydiv1 mydiv cl" id="mydiv1">
    <select class="select1">
        <option>1111111</option>
        <option>1111112</option>
        <option>1111113</option>
    </select>
    <select class="select2">
        <option>2111111</option>
        <option>2111112</option>
        <option>2111113</option>
    </select>
</div>
<div class="mydiv2 mydiv cl" id="mydiv2">
    <select class="select1">
        <option>1211111</option>
        <option>1211112</option>
        <option>1211113</option>
    </select>
    <select class="select2">
        <option>2211111</option>
        <option>2211112</option>
        <option>2211113</option>
    </select>
</div>
<script type="text/javascript"  src="js/entry.js"></script>
</body>
</html>

main.css:

html,body,div,p,span,i,dl,dt,dd,ul,ol,li,a,select,input,textarea{ margin:0; padding:0; }
body{ font: 'Mircosoft Yahei' 14px/1.5; color: #333; }

ul,ol,li{ list-style: none; }
a:link,a:visited,a:active,a:hover{ text-decoration: none; color: #333; }
input,select,textarea{ outline: none; }

.cl{ zoom:1; }
.cl:after{ clear: both; display: table; content: ""; }

.mydiv select{ float: left; margin:10px; width: 300px; height: 40px; line-height: 40px; }

/*select 模拟*/
.js-select-top{ border: 1px solid #dfdfdf; display: inline-block; height: 40px; line-height: 40px; position: relative; cursor: pointer; }
.js-sel-arr{ display: inline-block; width: 0; height: 0; border:6px dashed transparent; border-top:6px solid #555; right: 10px; position: absolute; top:50%; margin-top:-6px; }
.js-select-top .js-select-tit{ display: block; height: 100%; padding: 0 30px 0 10px; }
.js-select-top .default{ color: #999; }

.js-sel-list{ position: absolute; z-index: 9999; border: 1px solid #ddd; background: #fff; overflow-y: auto; }
.js-sel-list li{ height: 30px; line-height: 30px; }
.js-sel-list li a{ padding: 0 10px; display: block; }
.js-sel-list li.active a{ background: #eee; }

css文件中，主要的是select模拟的那段样式，可以根据自己的需求更改。

entry.js:

function selectFun(obj,i,dom){this.obj = $.extend({
        liHeight: "30px",
        ulHeight: "300px",
        liClass: "active"
    }, obj || {});
    this.dom = $(dom);
    this.index = i;
    this._width = this.dom.outerWidth();//宽度

    this.addSkin();

    $(document).click(function(e){
        var tag = $(e.target);
        $("ul.js-sel-list").not(":hidden").hide();
    });

}
selectFun.init = function(obj,fn,i,dom){
    return new selectFun(obj,fn,i,dom);
}
selectFun.prototype.addSkin = function(){//添加皮肤
  var _class = this.dom.attr("class");
  var self = this;
  //ie不能直接用css("margin")
  var marginTop = this.dom.css("marginTop");
  var marginRht = this.dom.css("marginRight");
  var marginBtm = this.dom.css("marginBottom");
  var marginLft = this.dom.css("marginLeft");
  var margin = marginTop + " " + marginRht + " " + marginBtm + " " + marginLft;

  this.topDom = $("<div class='js-select-top "+ _class +"' style='"+ this._width +"px; float:"+ this.dom.css("float") +"; margin:"+ margin +"' data-id='js-sel"+ this.index +"'><i class='js-sel-arr'></i></div>");//头部div
    this.titDom = $("<span class='js-select-tit'></span>");
    this.dom.hide().after(this.topDom.append(this.titDom));
    this.getVal();
    this.topDom.on("click",function(e){
        e.stopPropagation();
        var menu = $("#js-sel"+ self.index);
        if(menu.length > 0 && menu.is(":hidden")){
            menu.siblings("ul.js-sel-list").hide();
            menu.show();
        }else if(menu.length === 0){
            $("ul.js-sel-list").hide();
            self.addMenu($(this));
        }else{
            menu.hide();
        }
    });
}
selectFun.prototype.position = function(t){//获取菜单位置
    var screenh = $(window).height();
    var dt = t.offset().top;
    var df = t.offset().left;
    var dh = t.outerHeight();
    var ulh, clih, culh;
    culh = parseInt(this.obj.ulHeight);
    clih = parseInt(this.obj.liHeight);
    var opth = this.dom.find("option").length * clih;
    if(opth >= culh){
        ulh = culh;
    }else{
        ulh = opth;
    }
    if((dt + dh + ulh) >= screenh && (dt - ulh) > 0){
        return {"left":df,"top":(dt - ulh)};
    }else{
        return {"left":df,"top":(dt + dh)};
    }
}
selectFun.prototype.addMenu = function(t){//添加下拉菜单
    var pos = this.position(t);
    var listDom = $("<ul class='js-sel-list' id='js-sel"+ this.index +"' style='"+ this._width +"px; left:"+ pos.left +"px; top:"+ pos.top +"px; max-height:"+ this.obj.ulHeight +"'></ul>");
    var listStr = '';
    var opts = this.dom.find("option");
    var liClass = '';
    var self = this;
    for(var n=0; n<opts.length; n++){
        if(opts.eq(n).val() === self.dom.val()){
            liClass = self.obj.liClass;
        }else{
            liClass = '';
        }
        listStr += '<li data-val="'+opts.eq(n).val()+'" class="'+ liClass +'" style="height:'+ self.obj.liHeight +'; line-height:'+ self.obj.liHeight +'"><a href="javascript:;">'+ opts.eq(n).html() +'</a></li>'
    }
    listDom.html(listStr);
    $("body").append(listDom);

    this.liClick('#js-sel'+ this.index);
    this.keyEvent(listDom);
}
selectFun.prototype.getVal = function(){//头部获取值
    var val = this.dom.val();
    var txt = this.dom.find("option:selected").text();
    this.titDom.text(txt).data("val",val);
}
selectFun.prototype.setVal = function(t){//设置头部值 t:li
    var val = t.data("val");
    var txt = t.text();
    this.titDom.text(txt).data("val",val);
    this.dom.find("option").eq(t.index()).attr("selected",true);
    this.dom.trigger("change");
    t.parents("ul.js-sel-list").hide();
}
selectFun.prototype.liClick = function(tp){//点击li事件
    var self = this;
    $("body").on("click",tp+" li",function(e){
        e.stopPropagation();
        var $t = $(this);
        
        self._addClass($t);
        self.setVal($t);
    });
}
selectFun.prototype.keyEvent = function(menu){//键盘事件,ul的节点，当前class的名称    
    var lis = menu.find("li");
    var len = lis.length;
    var self = this;
    $(document).keyup(function(e){
        if(menu.is(":hidden")){
            return;
        }
        var code = e.keyCode;
        var nowDom = menu.find("li." + self.obj.liClass);
        var nowIndex = nowDom.index();
        switch(code){
            case 38:
                nowIndex --;
                if(nowIndex < 0){
                    nowIndex = len - 1;
                }
                self._addClass(lis.eq(nowIndex));
              break;
            case 40:
                nowIndex ++;
                if(nowIndex >= len){
                    nowIndex = 0;
                }
                self._addClass(lis.eq(nowIndex));
              break;
            case 13:
              self.setVal(nowDom);
              break;
            case 27:
                menu.hide();
              break;  
        }
    });
}

selectFun.prototype._addClass = function(t){//添加当前class
    t.addClass(this.obj.liClass).siblings("li").removeClass(this.obj.liClass);
}

$.fn.extend({
    selecter: function(obj){
        this.each(function(i,dom){
            selectFun.init(obj,i,dom);
        });
    }
});

$("select").selecter();
$(".select1").change(function(){
    alert($(this).val());
});

js中的selecter方法可以传递一个json格式的数据，其中liHeight指的是li的高度，ulHeight指的是下拉菜单的高度，liClass是当前li的状态class。

例如，我想改变li的高度为25px：

$("select").selecter({"liHeight":"25px"});

其中select的原有事件change可以正常使用。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/cyj7/p/4901670.html