[jQueryUI] - Chosen:select下拉选择框美化插件及问题

Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此,它更扩展了select,增加了自动筛选的功能。它可对列表进行分组,同时也可禁用某些选择项。

先来看下插件的效果:

 

跟这个比起来,原来的select样式是不是弱爆了!

马上来武装我们的select吧:

1、先把js和css文件引用到网页里面去:

?
1
2
3
< link  href = "js/jqueryUI/chosen/chosen.css"  type = "text/css"  rel = "stylesheet"  />
< script  type = "text/javascript"  src = "js/jquery.1.4.4.min.js" ></ script >
< script  type = "text/javascript"  src = "js/jqueryUI/chosen/chosen.jquery.js" ></ script >

2、创建一个select元素,如下: 

?
1
2
3
4
5
6
7
< select  name = "dept"  style = "width: 150px;"  id = "dept"  class = "dept_select"
     < option  value = "部门1" >部门1</ option >
     < option  value = "部门2" >部门2</ option >
     < option  value = "部门3" >部门3</ option >
     < option  value = "部门4" >部门4</ option >
     < option  value = "部门5" >部门5</ option >
</ select >

3、然后在js中调用Chosen定义的方法:

?
1
2
3
$( function (){
     $( '.dept_select' ).chosen();
});

4、搞定收工,屌丝立马变成高富帅有木有~ 

 



 

 

  

 

 

chosen插件的一些设置项:

1、默认文字选项

你可以在select元素上添加data-placeholder属性定义默认文字,也就是在没有选择选项的情况下,显示的文字。 

?
1
2
3
4
5
6
7
8
< select  data-placeholder = "选择部门"  style = "width:150px;"  class = "dept_select" >
     < option  value = "-1" ></ option >
     < option  value = "部门1" >部门1</ option >
     < option  value = "部门2" >部门2</ option >
     < option  value = "部门3" >部门3</ option >
     < option  value = "部门4" >部门4</ option >
     < option  value = "部门5" >部门5</ option >
</ select >

这里还要注意一点,要想显示出默认文字,select下的第一个选择项必须为空的option。

 

2、对其方式
选项文字默认是左对齐的,可以在class属性中加入“chzn-rtl”来设置右对齐: 

?
1
< select  data-placeholder = "选择部门"  class = "dept_select chzn-rtl"  style = "width:150px;" >

 

3、JS参数设置

在调用chosen()方法时,我们可以设置一些参数: 

选项 描述
no_results_text 无搜索结果显示的文本
allow_single_deselect 是否允许取消选择
max_selected_options 当select为多选时,最多选择个数

 

?
1
2
3
4
5
$( ".some_select" ).chosen({
     /*max_selected_options: 2,*/
     no_results_text: "没有找到" ,
     allow_single_deselect: true
});

 

4、事件

  a) change事件:

?
1
2
3
$( ".dept-select" ).chosen().change( function (){
     //do something...
});

  b) 当我们需要动态更新select下的选择项时,该怎么办呢?只要在更新选择项后触发Chosen中的liszt:updated事件就可以了:   

?
1
2
//...$(".dept-select").html('...<option>部门6</option>...');
$( ".dept-select" ).trigger( "liszt:updated" );

 

其他问题:

1、如果不想要搜索框的话,很简单,用css把它隐藏掉就OK了:

?
1
2
3
.chzn-container-single .chzn-search {
     display : none ;
}

2、做为天朝的程序猿,不得不考虑ie6和ie7下的情况。好吧,用ie6打开一看,select还是一副屌丝样!  

  翻看chosen.jquery.js发现在chosen方法中有如下一段,ie6和ie7直接返回select对象本身: 

?
1
2
3
if  ($.browser.msie && ($.browser.version === "6.0"  || ($.browser.version === "7.0"  && document.documentMode === 7))) {
     return  this ;
}

  把这段js注释掉,重新打开ie6和7,不再屌丝了有木有!虽然箭头图片和搜索图片不透明不和谐(用js处理下就和谐了)。。。

  终于能高高兴兴地在ie6使用了,尼玛过了会又发现问题了,还是坑爹的ie6和7!如果2个select在一起又不和谐了,请看:

 

  点开选择部门,尼玛这是闹哪样!见图: 

 

  好吧,这应该是z-index的问题,把css修改下,结果各种div各种z-index改到吐血还是这副死样子。

  最后没办法了,想了个笨办法,动态改变所有chzn-container的z-index,在点击select的时候让当前container的z-index最高,让其他select的chzn-container的z-index变低。在chosen.jquery.js中找到此方法:

?
1
2
3
4
5
6
Chosen.prototype.activate_field = function () {
     this .container.addClass( "chzn-container-active" );
     this .active_field = true ;      
     this .search_field.val( this .search_field.val());
     return  this .search_field.focus();
};

  将此方法改为:

?
1
2
3
4
5
6
7
8
9
Chosen.prototype.activate_field = function () {
     this .container.addClass( "chzn-container-active" );
     this .active_field = true ;      
     this .search_field.val( this .search_field.val());
     var  zindex = 1010;
     this .container.css( 'z-index' , '1010' )
     $( '.chzn-container' ).not( this .container).css( 'z-index' ,--zindex);
     return  this .search_field.focus();
};

  当然,你也可以在生成.chzn-container的时候按顺序赋予不同的z-index,这样就可以不用每次点击select都要重新设一遍了。

  至此,ie6和ie7下使用Chosen基本没什么问题了。。。  

  

 

  原创文章,转载请注明。本文链接地址:[jqueryUI] - Chosen:select下拉选择框美化插件及问题

已标记关键词 清除标记
相关推荐
<p> <span style="color:#4d4d4d;">当前课程中博客项目的实战源码是我在 GitHub上开源项目 My-Blog,目前已有 2000 多个 star:</span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdnimg.cn/202103310649344285.png" alt="" /><br /> </span> </p> <p> <span style="color:#4d4d4d;">本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 个人博客项目功能的讲解,<span style="color:#565656;">通过本课程的学习,不仅仅让你掌握基本的 Spring Boot 开发能力以及 Spring Boot 项目的大部分开发使用场景,同时帮你提前甄别和处理掉将要遇到的技术难点,认真学完这个课程后,你将会对 Spring Boot 有更加深入而全面的了解,同时你也会得到一个大家都在使用的博客系统源码,你可以根据自己的需求和想法进行改造,也可以直接使用它来作为自己的个人网站,这个课程一定会给你带来巨大的收获。</span></span> </p> <p> <span style="color:#4d4d4d;"><span style="color:#565656;"> </span></span> </p> <p> <span style="color:#e53333;"><span style="color:#e53333;"><strong>课程特色</strong></span></span> </p> <p> <span style="color:#e53333;"><span style="color:#e53333;"><strong> </strong></span></span> </p> <p> <span style="color:#4d4d4d;"><span style="color:#565656;"> </span></span> </p> <ol> <li> <span style="color:#565656;">课程内容紧贴 Spring Boot 技术栈,涵盖大部分 Spring Boot 使用场景。</span> </li> <li> <span style="color:#565656;">开发教程详细完整、文档资源齐全、实验过程循序渐进简单明了。</span> </li> <li> <span style="color:#565656;">实践项目页面美观且实用,交互效果完美。</span> </li> <li> <span style="color:#565656;">包含从零搭建项目、以及完整的后台管理系统和博客展示系统两个系统的功能开发流程。</span> </li> <li> <span style="color:#565656;">技术栈新颖且知识点丰富,学习后可以提升大家对于知识的理解和掌握,对于提升你的市场竞争力有一定的帮助。</span> </li> </ol> <p> <strong>实战项目预览</strong> </p> <p> <span style="color:#4d4d4d;"><span style="color:#565656;"><span style="color:#e53333;"><strong> </strong></span></span></span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdn.net/202005150303066258.png" alt="" /><br /> </span> </p> <p>   </p> <p> <span style="color:#4d4d4d;"> </span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdn.net/202005150305396930.png" alt="" /><br /> </span> </p> <p> <span style="color:#4d4d4d;"> </span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdn.net/202005150305528842.png" alt="" /><br /> </span> </p> <p> <span style="color:#4d4d4d;"> </span> </p> <p> <span style="color:#4d4d4d;"><img src="https://img-bss.csdn.net/202005150306056323.png" alt="" /><br /> </span> </p>
包含以下内容: 第一部分 基础篇 001 第一个C程序 002 运行多个源文件 003 求整数之积 004 比较实数大小 005 字符的输出 006 显示变量所占字节数 007 自增/自减运算 008 数列求和 009 乘法口诀表 010 猜数字游戏 011 模拟ATM(自动柜员机)界面 012 用一维数组统计学生成绩 013 用二维数组实现矩阵转置 014 求解二维数组的最大/最小元素 015 利用数组求前n个质数 016 编制万年历 017 对数组元素排序 018 任意进制数的转换 019 判断回文数 020 求数组前n元素之和 021 求解钢材切割的最佳订单 022 通过指针比较整数大小 023 指向数组的指针 024 寻找指定元素的指针 025 寻找相同元素的指针 026 阿拉伯数字转换为罗马数字 027 字符替换 028 从键盘读入实数 029 字符行排版 030 字符排列 031 判断字符串是否回文 032 通讯录的输入输出 033 扑克牌的结构表示 034 用“结构”统计学生成绩 035 报数游戏 036 模拟社会关系 037 统计文件的字符数 038 同时显示两个文件的内容 039 简单的文本编辑器 040 文件的字数统计程序 041 学生成绩管理程序 第二部分 数据结构篇 042 插入排序 043 希尔排序 044 冒泡排序 045 快速排序 046 选择排序 047 堆排序 048 归并排序 049 基数排序 050 二叉搜索树操作 051 二项式系数递归 052 背包问题 053 顺序表插入和删除 054 链表操作(1) 055 链表操作(2) 056 单链表就地逆置 057 运动会分数统计 058 双链表 059 约瑟夫环 060 记录个人资料 061 二叉树遍利 062 浮点数转换为字符串 063 汉诺塔问题 064 哈夫曼编码 065 图的深度优先遍利 066 图的广度优先遍利 067 求解最优交通路径 068 八皇后问题 069 骑士巡游 070 用栈设置密码 071 魔王语言翻译 072 火车车厢重排 073 队列实例 074 K阶斐波那契序列 第三部分 数值计算与趣味数学篇 075 绘制余弦曲线和直线的迭加 076 计算高次方数的尾数 077 打鱼还是晒网 078 怎样存钱以获取最大利息 079 阿姆斯特朗数 080 亲密数 081 自守数 082 具有abcd=(ab+cd)2性质的数 083 验证歌德巴赫猜想 084 素数幻方 085 百钱百鸡问题 086 爱因斯坦的数学题 087 三色球问题 088 马克思手稿中的数学题 089 配对新郎和新娘 090 约瑟夫问题 091 邮票组合 092 分糖果 093 波瓦松的分酒趣题 094 求π的近似值 095 奇数平方的有趣性质 096 角谷猜想 097 四方定理 098 卡布列克常数 099 尼科彻斯定理 100 扑克牌自动发牌 101 常胜将军 102 搬山游戏 103 兔子产子(菲波那契数列) 104 数字移动 105 多项式乘法 106 产生随机数 107 堆栈四则运算 108 递归整数四则运算 109 复平面作图 110 绘制彩色抛物线 111 绘制正态分布曲线 112 求解非线性方程 113 实矩阵乘法运算 114 求解线性方程 115 n阶方阵求逆 116 复矩阵乘法 117 求定积分 118 求满足特异条件的数列 119 超长正整数的加法 第四部分 图形篇 120 绘制直线 121 绘制圆 122 绘制圆弧 123 绘制椭圆 124 设置背景色和前景色 125 设置线条类型 126 设置填充类型和填充颜色 127 图形文本的输出 128 金刚石图案 129 飘带图案 130 圆环图案 131 肾形图案 132 心脏形图案 133 渔网图案 134 沙丘图案 135 设置图形方式下的文本类型 136 绘制正多边形 137 正六边形螺旋图案 138 正方形螺旋拼块图案 139 图形法绘制圆 140 递归法绘制三角形图案 141 图形法绘制椭圆 142 抛物样条曲线 14
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页