基于JQuery的Select選擇框的華麗變身
更新時(shí)間：2011年08月23日 23:39:18 作者：
HTML Form 表單里的各種組件，例如文本輸入框，textarea，按鈕等，都可以通過(guò)CSS或其它技術(shù)進(jìn)行美化，讓它們看起來(lái)很漂亮了，唯獨(dú)下拉列表選項(xiàng)框(select box),不管你怎么做，它擺在那里總顯得格格不入。
不過(guò)這種情況可能是一去不復(fù)返了，如果你猜測(cè)是使用HTML5技術(shù)， 那就錯(cuò)了，在中國(guó)，使用IE6瀏覽器的人仍占絕大大多數(shù)，這種古老的瀏覽器是不認(rèn)識(shí)HTML5的。
我現(xiàn)在推薦的是一款JavaScript插件，它有JQuery和Prototype兩種版本，支持所有類型的瀏覽器。使用它后，你的頁(yè)面上的select選擇框會(huì)變的漂亮的讓你大吃一驚，下面是使用前和使用后的對(duì)比效果圖。
單選模式：
多選模式：
更多的效果請(qǐng)?jiān)L問(wèn)這個(gè)插件的官方主頁(yè)的中文翻譯Chosen演示頁(yè)面。
具體的用法非常簡(jiǎn)單，你只需要在select是加入class=”chzn-select”屬性就行了，然后調(diào)用 jquery： $(“.chzn-select”).chosen()，一切都搞定。
您可能感興趣的文章:
- Chosen 基于jquery的選擇框插件使用方法
- jQuery實(shí)現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法
- 基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除代碼分享
- 基于jQuery下拉選擇框插件支持單選多選功能代碼
- jquery通過(guò)select列表選擇框?qū)Ρ砀駭?shù)據(jù)進(jìn)行過(guò)濾示例
- jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)代碼分享
- 各種選擇框jQuery的選中方法(實(shí)例講解)
- Jquery多選下拉列表插件jquery multiselect功能介紹及使用
- 用jquery實(shí)現(xiàn)下拉菜單效果的代碼
- 用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡(jiǎn)單的下拉菜單
- jQuery模擬12306城市選擇框功能簡(jiǎn)單實(shí)現(xiàn)方法示例
相關(guān)文章
jquery遍歷之parent()和parents()的區(qū)別及parentsUntil()方法詳解
這篇文章主要介紹了jquery遍歷之parent()和parents()的區(qū)別及parentsUntil()方法。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
jQuery實(shí)現(xiàn)廣告條滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)廣告條滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章向大家推薦20款效果非常棒的 jQuery 插件。jQuery 是一個(gè)非常優(yōu)秀的JavaScript庫(kù)，它簡(jiǎn)化了 HTML 文檔遍歷，事件處理，動(dòng)畫以及 Ajax 交互，同時(shí)也改變了很多人編寫 JavaScript 代碼的方式
2011-11-11 
jQuery dataTables與jQuery UI 對(duì)話框dialog的使用教程
這篇文章主要介紹了jQuery dataTables與jQuery UI 對(duì)話框dialog的使用教程的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09 
jquery 無(wú)限級(jí)聯(lián)菜單案例分享
phpcms的地區(qū)級(jí)聯(lián)菜單，感覺寫的挺有意思于是自己也實(shí)現(xiàn)了個(gè)，感興趣的各位路過(guò)的可以參考下哈，希望本例可以幫助到你
2013-03-03 
這篇文章主要介紹了JQuery遍歷DOM節(jié)點(diǎn)的方法,實(shí)例分析了jQuery遍歷DOM節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下
2015-06-06 
jQuery完成表單驗(yàn)證的實(shí)例代碼(純代碼)
這篇文章主要介紹了jquery完成表單驗(yàn)證的實(shí)例代碼，代碼簡(jiǎn)單易懂,需要的朋友可以參考下
2017-09-09 
jQuery擴(kuò)展實(shí)現(xiàn)text提示還能輸入多少字節(jié)的方法
這篇文章主要介紹了jQuery擴(kuò)展實(shí)現(xiàn)text提示還能輸入多少字節(jié)的方法,涉及jQuery擴(kuò)展及字符串操作相關(guān)技巧,需要的朋友可以參考下
2016-11-11 
jQuery 動(dòng)畫與停止動(dòng)畫效果實(shí)例詳解
這篇文章主要介紹了jQuery 動(dòng)畫與停止動(dòng)畫效果,結(jié)合實(shí)例形式詳細(xì)分析了jQuery 動(dòng)畫與停止動(dòng)畫效果相關(guān)函數(shù)功能、用法及使用注意事項(xiàng),需要的朋友可以參考下
2020-05-05