自己写的一个美化select插件,浏览器自带的实在太丑,还不能用css自定义。

插件主要原理是隐藏原生的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:; 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:; top:27px; z-index:; 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 即可

美化select的jquery插件的更多相关文章

  1. pc端美化select,jquery获取select中的option的text值

      代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. html select美化模拟jquery插件select2.js

    代码展示:http://www.51xuediannao.com/demo.php 代码说明: select2.js是一个html select美化模拟类jquery插件,但是select2.js又远 ...

  3. 海量jQuery插件

    转自:http://blog.csdn.net/zzq58157383/article/details/6900142 提醒大家在使用的时候注意jQuery包的版本问题,最好是使用相同的版本,因为使用 ...

  4. 超经典~超全的jQuery插件大全

    海量的jQuery插件帖,很经典,不知道什么时候开始流传,很早以前就收藏过,为了工作方便还是发了一份放在日志里面. 其中有些已经无法访问,或许是文件移除,或许是被封锁.大家分享的东西,没什么特别的可说 ...

  5. jquery插件,美化select标签

    最近经常与select打交道,因为ie下的select实在太丑了,css怎么搞都搞不好看,因为程序已经写得差不多了,要再去模拟select改动太大,就想着能否不改动select,同时美化它.借鉴一下这 ...

  6. 20款美化网站的 jQuery Lightbox 灯箱插件

    jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会 ...

  7. jQuery插件:模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  8. jquery美化select,自定义下拉框样式

    select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...

  9. jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

随机推荐

  1. Vue2.0环境搭建和测试demo

    Vue2.0 推荐开发环境 Homebrew 1.0.6(Mac).Node.js 6.7.0.npm 3.10.3.webpack 1.13.2.vue-cli 2.4.0.Atom 1.10.2 ...

  2. RequireJs 深入理解

    原文   http://www.tuicool.com/articles/jam2Anv RequireJs已经流行很久了,我们在项目中也打算使用它.它提供了以下功能: 声明不同js文件之间的依赖 可 ...

  3. Ajax与ashx异步请求的简单案例

    Ajax与ashx异步请求的简单案例: 前台页面(aspx): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  4. 我的第一个MVC项目

    这是本人第一个完全按照MVC开发模式完成的项目,非常简陋,仅仅完成的查询,保存,删除基本功能,而且存在编码问题没有解决,以后会慢慢增加功能.慢慢改进 package com.sdjt.dao; imp ...

  5. Mybatis Generator最完整配置详解

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration ...

  6. (原)lua使用ffi调用c程序的函数

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5812763.html 参考网址: http://luajit.freelists.narkive.co ...

  7. css3 页面退出和进入的动画

    @-webkit-keyframes slideIn { from { -webkit-transform: translate3d(100%,0,0); transform: translate3d ...

  8. sql中NULL的问题

    sql中NULL的问题   今天一不小心在sql中写出以下脚本 select defaultPositionId from TableName where UserId=1100528 and def ...

  9. Font Rending 的 Hint 机制对排版的影响

    Font Rending 的 Hint 机制对排版的影响[转] 在设计一种 Font 时,设计者使用的是一个抽象的单位,叫做 EM,来源于大写 M 的宽度(通常英文字体中大写 M 的宽度最大).EM ...

  10. 管理Activity,随时随地控制Activity的销毁工作

    public class ActivityManager { public static List<Activity> activityList = new ArrayList<Ac ...