美化select的jquery插件
2016-05-27 00:06
726 查看
自己写的一个美化select插件,浏览器自带的实在太丑,还不能用css自定义。
插件主要原理是隐藏原生的select控件,支持select上设置change事件。
脚本
样式
调用
当前支持一个参数 width用来设置宽度,如果是动态更改下拉选项,在select上调用一次iSelect 即可
插件主要原理是隐藏原生的select控件,支持select上设置change事件。
脚本
/* * iSelect * 自定义select控件 */ (function ($) { $.fn.iSelect = function (configs) { var configs = $.extend({}, $.fn.iSelect.defaults, configs || {}); return this.each(function (index, element) { var myThis = this; var $this = $(this); var elId = $this.attr('name'); if (elId == '' || typeof (elId) == 'undefined') { elId = 's00' + index; $this.attr('id', elId); } var $wrap = $('#iselect-' + elId); if ($wrap.length <= 0) { $wrap = $('<span class="iselect" id="iselect-' + elId + '"><div class="old"></div><div class="text"></div><div class="dropdown"><ul></ul></div></span>'); $this.before($wrap); $this.prependTo($wrap.find('.old')); } var $text = $wrap.find('.text'); var $dropdown = $wrap.find('.dropdown'); var width = $this.width(); var allwidth = configs.width; if (allwidth == 'auto') { allwidth = width; } //$wrap.css({width:allwidth}); $text.css({width:allwidth}); $dropdown.css({width:allwidth + 2}); var $list = $dropdown.find('ul'); var html = ''; var i = 0; var text = ''; var value = ''; var selected = false; var style = ''; for (i = 0; i < myThis.options.length; i++) { text = myThis.options[i].text; value = myThis.options[i].value; selected = myThis.options[i].selected; if (selected) { style = ' class="selected"'; } else style = ''; html += '<li data-value="' + value + '"' + style + '><a href="javascript:;">' + text + '</a></li>'; } $list.html(html); if (myThis.options.length>0) { text = myThis.options[myThis.selectedIndex].text; $text.html(text); } $dropdown.hide(); $text.click(function (event) { event.stopPropagation(); $dropdown.show(); }); $(document.body).click(function () { $dropdown.hide(); }); var $items = $list.find('li'); $items.click(function (event) { var selectedIndex = $items.index($(this)); myThis.options[selectedIndex].selected = true; $(myThis).change(); $text.html(myThis.options[myThis.selectedIndex].text); $dropdown.hide(); }); }); }; $.fn.iSelect.defaults = {width:'auto'}; })(jQuery);
样式
.iselect { position:relative; display:inline-block; zoom:1; height:24px; line-height:24px; } .iselect .old { height:1px; overflow:hidden; } .iselect .text { height:24px; text-indent:5px; background:#fff url(images/iselect.png) no-repeat right center; border:solid 1px #d5d5d5; cursor:default; } .iselect .text:hover { border-color:#5999d0; background-image:url(images/iselect_hover.png); } .iselect .dropdown { position:absolute; left:0; top:27px; z-index:99; width:100%; height:auto; background:#fff; } .iselect .dropdown ul { border:solid 1px #d5d5d5; max-height:360px; overflow:auto; } .iselect .dropdown li { cursor:pointer; } .iselect .dropdown li a { display:block; padding:0 5px; } .iselect .dropdown li.selected a { background:#5999d0; color:#eee; } .iselect .dropdown a:hover { background:#eee; }
调用
$(function(){ $('select').iSelect(); });
当前支持一个参数 width用来设置宽度,如果是动态更改下拉选项,在select上调用一次iSelect 即可
相关文章推荐
- jquery的ajax同步和异步
- jQuery ajax - ajax() 方法
- Knockout.js用jquery的val设置值不更新
- js选择器和jquery选择器的比较
- jquery中的on方法绑定动态元素
- 使用jQuery制作Web页面遮罩层插件的实例教程
- js和jQuery以及easyui实现对下拉框的指定赋值
- Jquery 自定义弹窗等待
- jQuery全选功能
- 获取$.post $.get回调函数返回值问题
- jQuery中两种阻止事件冒泡的区别
- 使用JQuery把元素Div弹出与关闭
- 使用jquery插件报错:TypeError:$.browser is undefined的解决方法
- jquery ajax 无刷新分页
- web前端35个jQuery小技巧!
- jQuery.extend 函数详解
- Jquery 动态生成li标签以及单击事件的绑定
- jquery form表单序列号
- jquery-$()参数详解
- 【转载】jQuery手机移动端触屏日历日期选择