基于JQuery的Select選擇框的華麗變身
更新時間：2011年08月23日 23:39:18 作者：
HTML Form 表單里的各種組件，例如文本輸入框，textarea，按鈕等，都可以通過CSS或其它技術(shù)進行美化，讓它們看起來很漂亮了，唯獨下拉列表選項框(select box),不管你怎么做，它擺在那里總顯得格格不入。
不過這種情況可能是一去不復(fù)返了，如果你猜測是使用HTML5技術(shù)， 那就錯了，在中國，使用IE6瀏覽器的人仍占絕大大多數(shù)，這種古老的瀏覽器是不認識HTML5的。
我現(xiàn)在推薦的是一款JavaScript插件，它有JQuery和Prototype兩種版本，支持所有類型的瀏覽器。使用它后，你的頁面上的select選擇框會變的漂亮的讓你大吃一驚，下面是使用前和使用后的對比效果圖。
單選模式：
多選模式：
更多的效果請訪問這個插件的官方主頁的中文翻譯Chosen演示頁面。
具體的用法非常簡單，你只需要在select是加入class=”chzn-select”屬性就行了，然后調(diào)用 jquery： $(“.chzn-select”).chosen()，一切都搞定。
您可能感興趣的文章:
- Chosen 基于jquery的選擇框插件使用方法
- jQuery實現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法
- 基于jquery實現(xiàn)select選擇框內(nèi)容左右移動添加刪除代碼分享
- 基于jQuery下拉選擇框插件支持單選多選功能代碼
- jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進行過濾示例
- jquery實現(xiàn)select選擇框內(nèi)容左右移動代碼分享
- 各種選擇框jQuery的選中方法(實例講解)
- Jquery多選下拉列表插件jquery multiselect功能介紹及使用
- 用jquery實現(xiàn)下拉菜單效果的代碼
- 用jquery實現(xiàn)的一個超級簡單的下拉菜單
- jQuery模擬12306城市選擇框功能簡單實現(xiàn)方法示例
相關(guān)文章
本文是對jqgrid 編輯添加功能進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
jQuery實現(xiàn)獲取動態(tài)添加的標簽對象示例
這篇文章主要介紹了jQuery實現(xiàn)獲取動態(tài)添加的標簽對象,涉及jQuery針對頁面元素的動態(tài)添加、元素獲取與事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
基于jquery異步傳輸json數(shù)據(jù)格式實例代碼
這篇文章主要介紹了jquery異步傳輸json數(shù)據(jù)格式實例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了jquery對象和DOM對象的任意相互轉(zhuǎn)換的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
jQuery頭像裁剪工具jcrop用法實例(附演示與demo源碼下載)
這篇文章主要介紹了jQuery頭像裁剪工具jcrop用法,結(jié)合實例形式分析了jQuery頭像裁剪工具jquery.jcrop.js具體使用技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
jQuery設(shè)置指定網(wǎng)頁元素寬度和高度的方法
這篇文章主要介紹了jQuery設(shè)置指定網(wǎng)頁元素寬度和高度的方法,涉及jQuery操作width及height方法的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
Jquery.TreeView結(jié)合ASP.Net和數(shù)據(jù)庫生成菜單導(dǎo)航條
在網(wǎng)上瀏覽了許多關(guān)于利用Jquery.TreeView插件生成樹的例子！但是大多數(shù)都沒有結(jié)合數(shù)據(jù)庫來生成樹，很難運用到實際項目中！2010-08-08
本文給大家收集了三種不同類型的jquery時間軸特效，涉及到j(luò)quer相關(guān)知識，對jquery時間軸特效感興趣的朋友可以參考下本文2015-11-11
jquery中利用navigator.userAgent.indexOf來判斷瀏覽器類型，并進行了一下處理，如果不想使用jquery，稍為修改下代碼就可以為自己所用2011-04-04
本篇文章主要是對jquery選擇器之內(nèi)容過濾選擇器進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01