[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基本沒什么問題了。。。  

 

$("#xxxxId").chosen({
search_contains: true
});

即可進行模糊查詢(無論英文數字還是漢字都可以)
jquery.chosen.js查詢時,chosen默認從第一個字符搜索,所以寫中間的字符搜索時,是搜索不出來的
若想實現中間字符的模糊查詢,下面的js中(search_contains屬性為true即可)可以讓chosen搜索選項的中間及末尾字符
no_results_text是搜索不到內容時,顯示的提示語
placeholder_text是下拉選項默認顯示的文字
disable_search_threshold是select的option選項大於等於此值,才會顯示查詢的文本框
jQuery(".chosen").chosen({
        no_results_text: "My language message.", 
        placeholder_text : "My language message.", 
        search_contains: true,
        disable_search_threshold: 10
    });
或者是直接將jquery.chosen.js的源碼修改了
將this.search_contains = this.options.search_contains || !1
改為this.search_contains = true || !1

 最新版本 https://github.com/harvesthq/chosen/releases

 

  轉自:[jqueryUI] - Chosen:select下拉選擇框美化插件及問題


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM