1. 程式人生 > >Combo Select 下拉框外掛使用

Combo Select 下拉框外掛使用

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">