唐山網站建設,唐山網站制作,唐山做網站,唐山網頁設計,唐山網站優(yōu)化,唐山網絡公司,唐山400電話業(yè)務 24小時熱線：15031560143 關于我們 | 網站模版 | 支付方式 | 網站地圖
很多人為select的諸多不完善而頭痛，如無法自定義樣式、IE6中無法被浮動層遮住等等。下面介紹一款堪稱最完美的下拉框組件：UU人下拉框
特點1：美化的并且可自定義的外觀
UU人下拉框使用JS進行渲染。當頁面引入了腳本和CSS后，頁面中的下拉框都會變成如下外觀：
該外觀是由CSS和圖片控制。通過修改CSS可以很方便地實現(xiàn)更改外觀。
UU人下拉框不存在IE6中無法被浮動層遮住等問題。
特點2：使用簡單
UU人下拉框代碼寫法與原來的寫法一樣，都是如下代碼：
<select>
<option value="">請選擇功能</option>
<option value="1">新增圖片</option>
<option value="2">維護圖片</option>
<option value="3">新增新聞</option>
</select>
也可以動態(tài)創(chuàng)建UU人下拉框。
特點3：寬度處理
你是否遇到以下兩種情況：
（1）不設置下拉框寬度，那么下拉框寬度默認為最寬的選項的寬度。當其選項過長時輕則會導致整個表單不整齊，重則會撐壞頁面布局；
（2）設置下拉框寬度，但是由于下拉框的選項寬度有可能會很長，可能會導致內容顯示不完全。
UU人下拉框對于寬度的處理方式是：默認會有一個寬度，即使選項里面有很長的文字。效果如下：
這樣就保證了表單元素寬度一致又不影響內容。放在表單中的整體效果如下：
如果希望下拉框的寬度自適應最長選項，為其設置一個參數(shù)即可，效果如下：
另外還可以通過style強制一個寬度。
特點4：支持分組
下拉框支持分組，代碼與普通select分組代碼一樣。如
<select>
<option>請選擇權限</option>
<optgroup label="首頁信息發(fā)布">
<option value="新增圖片">新增圖片</option>
<option value="維護圖片">維護圖片</option>
<option value="新增新聞">新增新聞</option>
</optgroup>
<optgroup label="人員維護">
<option value="新增用戶">新增用戶</option>
<option value="用戶列表">用戶列表</option>
</optgroup>
</select>
效果如下：
特點5：下拉列表展開的方向智能化
原始的下拉框如果在網頁中的位置比較偏下，向下展開肯能會導致內容顯示不全。
UU人下拉框在這種情況會進行智能判斷從而向上展開。效果如下：
當下拉列表選項過多，向上也無法展示完全時，UU人下拉框會判斷一下向上和向下哪里空間大，就向哪里展開，并出現(xiàn)滾動條。效果如下：
特點6：下拉框可編輯
為下拉框代碼添加一個屬性，就把它變成了一個可編輯的下拉框，效果如下：
特點7：集成了ajax聯(lián)動功能
通過設置可以很簡單地實現(xiàn)下拉框聯(lián)動功能�？芍С值穆�(lián)動級數(shù)為無限級！
例如如下代碼就創(chuàng)建了一個二級聯(lián)動的下拉框：
所學專業(yè)：
<select id="sel01" childId="sel02" childDataPath=" http://localhost/kj/trainplan.do?method=" >
<option value="">請選擇專業(yè)</option>
<option value="bj1">專業(yè)1</option>
<option value="bj2">專業(yè)2</option>
</select>
所屬班級：
<select id="sel02">
<option value="0">請先選擇專業(yè)</option>
</select>
代碼中的childId指定要聯(lián)動的下拉框的ID，childDataPath指定二級下拉框數(shù)據來源，與一級下拉框的value關聯(lián)來獲取數(shù)據。
效果如下：
特點8：自定義下拉列表的列數(shù)
當下拉框項目過多時，可以通過添加一個屬性來指定列數(shù)，并可自定義列寬。效果如下：
特點9：完美的瀏覽器兼容性
無論是IE6、IE7、IE8還是FireFox、Chrome、Safira，甚至在Linux下都保持功能與外觀的一致性。
在http://hello-bees.cn應用測試通過