360UI 界面框架 最完美的select下拉框美化

最完美的select下拉框美化

不少人爲select的諸多不完善而頭痛，如沒法自定義樣式、IE6中沒法被浮動層遮住等等。下面介紹一款堪稱最完美的下拉框組件：360UI即QUI下拉框（ ）

 

特色1：美化的而且可自定義的外觀

QUI下拉框使用JS進行渲染。當頁面引入了腳本和CSS後，頁面中的下拉框都會變成以下外觀：

該外觀是由CSS和圖片控制。經過修改CSS能夠很方便地實現更改外觀。

QUI下拉框不存在IE6中沒法被浮動層遮住等問題。

 

特色2：使用簡單

QUI下拉框代碼寫法與原來的寫法同樣，都是以下代碼：

<select>

   <optionvalue="">請選擇功能</option>

   <optionvalue="1">新增圖片</option>

   <optionvalue="2">維護圖片</option>

   <optionvalue="3">新增新聞</option>

 </select>

也能夠動態建立下拉框。

 特色3：寬度處理

你是否遇到如下兩種狀況：

（1）不設置下拉框寬度，那麼下拉框寬度默認爲最寬的選項的寬度。當其選項過長時輕則會致使整個表單不整齊，重則會撐壞頁面佈局；

（2）設置下拉框寬度，可是因爲下拉框的選項寬度有可能會很長，可能會致使內容顯示不徹底。

 

QUI下拉框對於寬度的處理方式是：默認會有一個寬度，即便選項裏面有很長的文字。效果以下：

這樣就保證了表單元素寬度一致又不影響內容。放在表單中的總體效果以下：

 

若是但願下拉框的寬度自適應最長選項，爲其設置一個參數便可，效果以下：

 

另外還能夠經過style強制一個寬度。

 

特色4：支持分組

下拉框支持分組，代碼與普通select分組代碼同樣。如

<select>

       <option>請選擇權限</option>

       <optgroup label="首頁信息發佈">

              <option value="新增圖片">新增圖片</option>

              <option value="維護圖片">維護圖片</option>

              <option value="新增新聞">新增新聞</option>

       </optgroup>

       <optgroup label="人員維護">

               <option value="新增用戶">新增用戶</option>

        <option value="用戶列表">用戶列表</option>

       </optgroup>

</select>

效果以下：

 

特色5：下拉列表展開的方向智能化

原始的下拉框若是在網頁中的位置比較偏下，向下展開肯能會致使內容顯示不全。

QUI下拉框在這種狀況會進行智能判斷從而向上展開。效果以下：

當下拉列表選項過多，向上也沒法展現徹底時，UU人下拉框會判斷一下向上和向下哪裏空間大，就向哪裏展開，並出現滾動條。效果以下：

 

特色6：下拉框可編輯

爲下拉框代碼添加一個屬性，就把它變成了一個可編輯的下拉框，效果以下：

 

特色7：集成了ajax聯動功能

經過設置能夠很簡單地實現下拉框聯動功能。可支持的聯動級數爲無限級！

例如以下代碼就建立了一個二級聯動的下拉框：

所學專業：

<select id="sel01" childId="sel02" childDataPath=" http://localhost/kj/trainplan.do?method=" >

    <option value="">請選擇專業</option>

    <option value="bj1">專業1</option>

<option value="bj2">專業2</option>

</select>  

 所屬班級：

 <select id="sel02">

    <option value="0">請先選擇專業</option>

 </select>     

代碼中的childId指定要聯動的下拉框的ID，childDataPath指定二級下拉框數據來源，與一級下拉框的value關聯來獲取數據。

效果以下：

 特色8：自定義下拉列表的列數

當下拉框項目過多時，能夠經過添加一個屬性來指定列數，並可自定義列寬。

特色9：完美的瀏覽器兼容性

不管是IE6、IE7、IE8仍是FireFox、Chrome、Safira，甚至在Linux下都保持功能與外觀的一致性。

 開源項目網址：http://www.oschina.net/p/360ui