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

hosen 是一个支持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下拉选择框美化插件及问题

时间: 2024-10-21 23:31:05

[jQueryUI] - Chosen:select下拉选择框美化插件及问题【转】的相关文章

jquery.chosen.js下拉选择框美化插件项目实例

由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生变化.为了界面的美观,不得已查资料寻找另外的插件. 使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果 完成效果如下 实现步骤如下 1.导入相关文件 <link rel="stylesheet" href="${ctxStatic}/css/chos

CSS自定义select下拉选择框的样式(不用其他标签模拟)

CSS自定义select下拉选择框的样式(不用其他标签模拟):http://www.jb51.net/css/148841.html CSS美化选择框:http://www.cnblogs.com/shishm/archive/2012/03/02/2376759.html 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5

第三章:Select 下拉选择框的练习

1. 练习 Select 下拉选择框的练习. 2. 针对于这样的情况,如何来定位元素: 3. 总结: 看到下拉选择框,标准的 Select 下拉框时,可以选择合适的页面元素来定位.

Select下拉选择框

var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=$("#select_id").val(); //获取Select选择的Value var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 var max

基于jQuery美化联动下拉选择框

今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="container"> <div class="inner"> <section id="main_content"

Bootstrap系列 -- 15. 下拉选择框select

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</

bootstrap-表单控件——下拉选择框select元素

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>表单控件--下拉选择框select元</title>     <!-

下拉选择框select的纯CSS替代方案

这篇教程中,我将给大家展示表单元素下拉选择框select的CSS替代方案.该方法采用css来实现,看上去非常简单.我们用radio标签列表来模拟下拉列表,选择一个radio可以很好的模拟出select中选择一个元素的效果. 一:HTML 下面是我们在form表单里面用到的html代码: .代码 <fieldset class="radio-container"> <div class="radio-options"> <div clas

Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)

单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”,如: <form role="form"