jquery插件，美化select标签

最近经常与select打交道，因为ie下的select实在太丑了，css怎么搞都搞不好看，因为程序已经写得差不多了，要再去模拟select改动太大，就想着能否不改动select，同时美化它。借鉴一下这篇文章js美化select，然后自己写了一个jquery插件，补充了一些功能。

原理（这里就直接copy啦）：

第一步：将表单中的select隐藏起来。
第二步：用脚本找到select标签在网页上的绝对位置。我们在那个位置上用DIV标签做个假的、好看点的来当他的替身。
第三步：用脚本把select标签中的值读出来。虽然藏起来了，但它里边的options我们还有用呢，统统取出来。
第四步：当用户点击select标签的替身，也就是div的时候。我们再用一个div浮在上一个div的下边，这个就是options的替身了。

说白了，就是弄一个div把原来的select完整遮住，然后实现弹出层和原来的option交互，难点就是交互。

本文不打算讲怎么实现，源码里有注释，主要是分享，顺便说下几个需要注意的问题以及使用方法，小弟语文渣，凑合着看吧。。。

所有代码全部打包在csdn下载那里，无需积分，下载地址

先贴张效果图chrome,ff,ie，电脑上还是ie11的，ie大家不用说吧，做兼容性，select万恶啊。

使用方法

包含jquery.js，我用的1.8，然后包含jquery.beautifySelect.js，完整html测试代码。

html代码：

1

2

3

4

5

<div style="margin:20px;">

     <select id="sel1"></select>

     <select id="sel2"></select>

     <button onclick="redraw()">重绘</button>

</div>

sel1是要覆盖的select，sel2作为对比。button测试select内容发生变化重新覆盖。

js代码：

添加select

1

2

3

4

5

6

var _html = "";

for(var i = 0;i<22;++i){

    _html += "<option>" +i+"闲来无事写插件"+"</option>";

}

document.getElementById("sel1").innerHTML = _html;

document.getElementById("sel2").innerHTML = _html;

调用

$("#sel1").beautifySelect({

    "maxShowItemNum" : 9,

    "downIcon" : "url(down.png)  right  no-repeat",

    "upIcon" : "url(up.png) right  no-repeat"

});

$("#sel1").change(function(){

    console.log(this.value+"改变");//观察事件

});

顺带测试select内容发生变化后的重绘

function redraw(){

    //如果select内容发生变化，相应重绘部分

    var _html = "";

    for(var i = 0 ;i<13;++i){

        _html += "<option>" +i+"内容改变啦"+ "</option>";

    }

    document.getElementById("sel1").innerHTML = _html;

    $("#sel1").beautifySelect({

        "sDivStyle" : {

            "border" : "1px solid red"

        }

    });

}

调用方法很简单，基本上使用过插件就知道，这里简单说下，maxShowItemNum是下拉框最大显示条数

downIcon是向下折叠图标，upIcon是向上折叠图标。这里就是css样式，可以修改select样式，下面是全部样式，有注释就不细说了。

可供选择入参

var defaultParObj = {

    "maxShowItemNum" : 10,//默认最多显示10条

    "sDivStyle" : {//select覆盖层样式

        "border" : "1px solid #A5A5A5",

        "fontSize" : "12px",

        "cursor" : "default"

    },

    "hDivStyle" : {//弹出层，即下拉样式

        "border" : "1px solid #7C99B7",

        "backgroundColor" : "#FFF",

        "maxHeight" : "200px",

        "overflowY" : "auto"

    },

    "ulStyle" : {//因为用ul,li模拟的下拉，这里是ul的样式

        "fontSize" : "12px"

    },

    "liStyle" : {//这是li的样式，就是每一条目

        "textIndent" : "4px",

        "height" : "20px",

        "lineHeight" : "20px",

        "cursor" : "default"

    },

    "liOnStyle": {//鼠标移上去的样式

        "backgroundColor" : "#1E90FF",

        "color" : "#FFF"

    },

    "liOffStyle" : {//鼠标移开的样式

        "backgroundColor" : "#FFF",

        "color" : "#000"

    }

    // "downIcon" : "url(...) 0 0",//向上图标

    // "upIcon" : "url(...) 0 0"//向下图标

};

注意：

因为使用的div模拟的select,浏览器上，select失去焦点后会关闭下拉，这个暂时还没想到办法实现，以前做过笨方法，

给body添加click事件，判断target，但是很慢。暂时不管吧，再来项目用模拟的，这个只是为了不改写好的事件做的美化。

特点：

除了上面说的不能失去焦点关闭，其他事件基本上都实现了，因为参照chrome的样式做的，不过提供属性，可以改样式。

最后附上插件源码，第一次弄,格式老不对，就直接粘了吧，代码打个包放在那啥下载那儿，亲们，欢迎吐槽！

下载链接csdn源代码下载

/**

 * @author 小余

 * 2014-08-30

 * 本插件基于jquery,为了美化select下拉框

 * 原理：

 * 第一步：将表单中的select隐藏起来。 

 * 第二步：用脚本找到select标签在网页上的绝对位置。 我们在那个位置上用DIV标签做个假的、好看点的来当他的替身。 

 * 第三步：用脚本把select标签中的值读出来。 虽然藏起来了，但它里边的options我们还有用呢，统统取过来。

 * 第四步：当用户点击select标签的替身，也就是div的时候。我们再用一个div浮在上一个div的下边，这个就是options的替身了。 

 * 调用举例：$("#selid").beautifySelect({

 *   
         "downIconUrl" : "ulr..",

 *           
 "upIconUrl"  : "url.."

 *       
     "sDivStyle" : {

 *           

 *       
      }

 * });

 * */

;

(function ($) {

  $.fn.beautifySelect = function (attrObj) {

    var defaultParObj = {

      'maxShowItemNum': 10,

      //默认最多显示10条

      'sDivStyle': {

        'border': '1px solid #A5A5A5',

        'fontSize': '12px',

        'cursor': 'default'

      },

      'hDivStyle': {

        'border': '1px solid #7C99B7',

        'backgroundColor': '#FFF',

        'maxHeight': '200px',

        'overflowY': 'auto'

      },

      'ulStyle': {

        'fontSize': '12px'

      },

      'liStyle': {

        'textIndent': '4px',

        'height': '20px',

        'lineHeight': '20px',

        'cursor': 'default'

      },

      'liOnStyle': {

        'backgroundColor': '#1E90FF',

        'color': '#FFF'

      },

      'liOffStyle': {

        'backgroundColor': '#FFF',

        'color': '#000'

      }

      // "downIcon" : "url(...) 0 0",//可入参

      // "upIcon" : "url(...) 0 0"

    };

    if (attrObj != undefined) {

      //合并

      for (var i in attrObj) {

        if (typeof (attrObj[i]) != 'object') {

          defaultParObj[i] = attrObj[i];

        } 

        else defaultParObj[i] = $.extend(defaultParObj[i], attrObj[i]);

      }

    }

    //console.log(JSON.stringify(defaultParObj));

    var attrObj = defaultParObj;

    //设置弹出层高度

    var liHeight = attrObj.liStyle.lineHeight;

    //px

    attrObj.hDivStyle.maxHeight = attrObj.maxShowItemNum * parseInt(liHeight.slice(0, liHeight.indexOf('p'))) + 'px';

    var selectDom = this.get(0);

    //判断当前dom是否是select，不是提示使用错误

    if (selectDom.tagName != 'SELECT') {

      alert('使用错误，dom不是select对象');

      return ;

    }

    var selectPosObj = $.getAbsolutePos(selectDom);

    selectDom.style.visibility = 'hidden';

    //隐藏select,要占据位置

    //sDiv表示show的div，hDiv表示会hide的div，如果已经有，清空dom，删除事件，重新创建

    if (document.getElementById('selectOf' + selectDom.id) != null) {

      $('#selectOf' + selectDom.id) .remove();

      $('#selectChild' + selectDom.id) .remove();

    }

    var sDiv = document.createElement('div');

    sDiv.id = 'selectOf' + selectDom.id;

    sDiv.style.position = 'absolute';

    sDiv.style.width = selectPosObj.width + 'px';

    sDiv.style.height = selectPosObj.height + 'px';

    sDiv.style.top = selectPosObj.top + 'px';

    sDiv.style.left = selectPosObj.left + 'px';

    sDiv.style.lineHeight = selectPosObj.height + 'px';

    sDiv.style.cursor = 'default';

    for (var i in attrObj.sDivStyle) {

      sDiv.style[i] = attrObj.sDivStyle[i];

    }

    if (attrObj.downIcon != undefined) {

      sDiv.style.background = attrObj.downIcon;

    }

    document.body.appendChild(sDiv);

    if (selectDom.selectedIndex == - 1) {

      alert('select未初始化');

      return ;

    }

    //select默认值传递给div

    sDiv.innerHTML = selectDom.options[selectDom.selectedIndex].innerHTML;

    var ifCreateHDiv = false;

    //是否创建过弹出层 
         
    sDiv.onclick = function () {

      if (ifCreateHDiv) {

        var hDiv = document.getElementById('selectChild' + selectDom.id);

        if (hDiv.style.display == 'none') {

          var index = selectDom.selectedIndex;

          for (var i in attrObj.liOnStyle) {

            $(hDiv) .find('li:eq(' + index + ')') .get(0) .style[i] = attrObj.liOnStyle[i];

          };

          hDiv.style.display = '';

          //马上弹出

          if (attrObj.upIcon != undefined) sDiv.style.background = attrObj.upIcon;

          //向上折叠

        } else {

          hDiv.style.display = 'none';

          if (attrObj.downIcon != undefined) sDiv.style.background = attrObj.downIcon;

          //向下折叠

        };

      } else {

        //没有创建过，创建

        var hDiv = document.createElement('div');

        hDiv.id = 'selectChild' + selectDom.id;

        hDiv.style.position = 'absolute';

        hDiv.style.width = selectPosObj.width + 'px';

        hDiv.style.top = (selectPosObj.top + selectPosObj.height + 2) + 'px';

        hDiv.style.left = selectPosObj.left + 'px';

        for (var i in attrObj.hDivStyle) {

          hDiv.style[i] = attrObj.hDivStyle[i];

        };

        //创建ul

        var ul = document.createElement('ul');

        ul.style.listStyle = 'none';

        ul.style.margin = '0';

        ul.style.padding = '0';

        for (var i in attrObj.ulStyle) {

          ul.style[i] = attrObj.ulStyle[i];

        };

        hDiv.appendChild(ul);

        document.body.appendChild(hDiv);

        ifCreateHDiv = true;

        if (attrObj.upIcon != undefined) sDiv.style.background = attrObj.upIcon;

        //向上折叠

        for (var i = 0; i < selectDom.options.length; ++i) {

          var li = document.createElement('li');

          li.name = 'li' + i;

          //后面会用到

          li.innerHTML = selectDom.options[i].innerHTML;

          for (var j in attrObj.liStyle) {

            li.style[j] = attrObj.liStyle[j];

          };

          ul.appendChild(li);

        };

        //默认填充第一个，那么默认第一个有样式

        for (var i in attrObj.liOnStyle) {

          $(hDiv) .find('li:eq(0)') .get(0) .style[i] = attrObj.liOnStyle[i];

        }

        $(ul) .on('click', 'li', function () {

          document.getElementById('selectChild' + selectDom.id) .style.display = 'none';

          sDiv.innerHTML = this.innerHTML;

          var index = parseInt(this.name.slice(2));

          if (index != selectDom.selectedIndex) {

            selectDom.options[parseInt(this.name.slice(2))].selected = true;

            $(selectDom) .trigger('change');

          }

        });

        $(ul) .on('mouseenter', 'li', function () {

          var liDom = this;

          for (var i in attrObj.liOnStyle) {

            liDom.style[i] = attrObj.liOnStyle[i];

          }

          //找到选中的li，弄掉样式,如果当前的li就是选中的li，就不弄掉

          var index = selectDom.selectedIndex;

          if (parseInt(liDom.name.slice(2)) != index) {

            for (var i in attrObj.liOffStyle) {

              $(ul) .find('li:eq(' + selectDom.selectedIndex + ')') .get(0) .style[i] = attrObj.liOffStyle[i];

            }

          }

        });

        $(ul) .on('mouseleave', 'li', function () {

          var liDom = this;

          for (var i in attrObj.liOffStyle) {

            liDom.style[i] = attrObj.liOffStyle[i];

          }

        });

      }

    }

  };

  $.getAbsolutePos = function (dom) {

    //取标签的绝对位置,高度是内容高度

    var t = dom.offsetTop;

    var l = dom.offsetLeft;

    var w = dom.offsetWidth;

    var h = dom.offsetHeight - 2;

    //offsetHeight包括border

    while (dom = dom.offsetParent) {

      t += dom.offsetTop;

      l += dom.offsetLeft;

    }

    return {

      'top': t,

      'left': l,

      'width': w,

      'height': h

    }

  };

}) (jQuery);

posted on 2014-09-01 23:43 AsuraIT 阅读(1095) 评论(0) 收藏举报

刷新页面返回顶部

AsuraIT

jquery插件，美化select标签

导航

公告