Combo Select 下拉框外掛使用
阿新 • • 發佈:2019-02-08
Combo Select 是一款友好的 jQuery 下拉框外掛,在 PC 瀏覽器上它能模擬一個簡單漂亮的下拉框,在 iPad 等移動裝置上又能回退到原生樣式。Combo Select 能夠對選項進行檢索過濾,同時支援鍵盤控制。
使用方法
1、引入檔案
<link rel="stylesheet" href="css/combo.select.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.combo.select.js"></script>
2、HTML
<div class="dowebok"> <select> <option value="">月份</option> <option value="一月">一月</option> <option value="二月">二月</option> <option value="三月">三月</option> ... </select> </div>
3、JavaScript
$(function() { $('select').comboSelect(); });
配置
屬性/方法 | 型別 | 預設值 | 說明 |
---|---|---|---|
comboClass | 字串 | combo-select | 外部控制器的 class |
comboArrowClass | 字串 | combo-select-arrow | 箭頭的 class |
comboDropDownClass | 字串 | combo-drop-down | 下拉展開後箭頭的 class |
inputClass | 字串 | combobox-input text-input | 輸入框的 class |
disabledClass | 字串 | option-disabled | 禁用選項的 class |
hoverClass | 字串 | option-hover | 滑鼠經過的 class |
selectedClass | 字串 | option-selected | 被選中項的 class |
markerClass | 字串 | combo-marker | 匹配搜尋的 class |
maxHeight | 整數 | 200 | 最大高度 |
themeClass | 字串 | 空 | 使用外部主題 |
extendStyle | 布林值 | true |
生成後的下拉框的 HTML 如下:
<div class="combo-select"> <select name="month" tabindex="-1"></select> <div class="combo-select-arrow"></div> <ul class="combo-drop-down"> <li>....</li> </ul> <input type="text" placeholder="請選擇" class="combobox-input text-input"> </div>遇到的坑
option 必須是已生成的,以前使用後臺資料填充的時候有資料但不能選擇,原因在於沒有<li></li>樣式。以下樣式會自動生成.
<select name="month" tabindex="-1"></select> <div class="combo-select-arrow"></div> <ul class="combo-drop-down"> <li>....</li> </ul> <input type="text" placeholder="請選擇" class="combobox-input text-input">