[jQueryUI] - Chosen：select下拉選擇框美化插件及問題【轉】

hosen 是一個支持jquery的select下拉框美化插件，它能讓醜陋的、很長的select選擇框變的更好看、更方便。不只如此，它更擴展了select，增長了自動篩選的功能。它可對列表進行分組，同時也可禁用某些選擇項。

先來看下插件的效果：

 

跟這個比起來，原來的select樣式是否是弱爆了！

立刻來武裝咱們的select吧：

一、先把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 >

二、建立一個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 >

三、而後在js中調用Chosen定義的方法：

?

1 2 3

$( function (){      $( '.dept_select' ).chosen(); });

四、搞定收工，屌絲立馬變成高富帥有木有~ 

 

 

 

　　

 

 

chosen插件的一些設置項:

一、默認文字選項

你能夠在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。

 

二、對其方式
選項文字默認是左對齊的，能夠在class屬性中加入「chzn-rtl」來設置右對齊： 

?

1	< select  data-placeholder = "選擇部門"  class = "dept_select chzn-rtl"  style = "width:150px;" >

 

三、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 });

 

四、事件

　　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" );

 

其餘問題：

一、若是不想要搜索框的話，很簡單，用css把它隱藏掉就OK了：

?

1 2 3

.chzn-container-single .chzn-search {      display : none ; }

二、作爲天朝的程序猿，不得不考慮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下拉選擇框美化插件及問題