jQuery使用Selectator插件實現(xiàn)多選下拉列表過濾框(附源碼下載)
Selectator是一款實現(xiàn)多選和搜索過濾功能的jQuery下拉列表框插件。它支持搜索,并且能直接影響原始的選擇框,而原始的選擇框是用作數(shù)據(jù)容器。通過該下拉列表框插件可以多選項進行分組,設置選項的圖標,對選項進行搜索過濾,以及進行多選選擇。
使用方法
使用該下拉類別框插件需要在頁面中引入fm.selectator.jquery.css、jQuery和fm.selectator.jquery.js文件。
<link rel="stylesheet" href="fm.selectator.jquery.css"/> <script src="jquery-1.11.0.min.js"></script> <script src="fm.selectator.jquery.js"></script>
HTML結構
一個選項帶圖標級帶分組選項的下拉列表的HTML結構如下:
<label for="select"> Multi select with custom content: </label> <select id="select" name="select" multiple> <optgroup label="Group one" class="group_one"> <option value="1" class="option_one" data-subtitle="Et" data-left="<img src='images/ingi.png'>" data-right="1">One</option> <option value="2" class="option_two" data-subtitle="To" data-left="<img src='images/runa.png'>" data-right="2">Two</option> </optgroup> <optgroup label="Group two" class="group_two"> <option value="3" class="option_three" data-subtitle="Tre" data-left="<img src='images/jogvan.png'>" data-right="3">Three</option> <option value="4" class="option_four" selected data-left="<img src='images/noimage.png'>" data-right="4">Four</option> <option value="5" class="option_five" selected data-left="<img src='images/noimage.png'>" data-right="5">Five</option> <option value="6" class="option_six">Six</option> </optgroup> <optgroup label="Group three" class="group_three"> <option value="7" class="option_seven">Seven</option> </optgroup> <option value="8" class="option_eight" data-subtitle="Otte">Eight</option> <option value="9" class="option_nine">Nine</option> <option value="10" class="option_ten" selected>Ten</option> <option value="11" class="option_eleven" selected>Eleven</option> <option value="12" class="option_twelve">Twelve</option> <option value="13" class="option_thirteen">Thirteen</option> <option value="14" class="option_fourteen">Fourteen</option> </select> <input value="activate selectator" id="activate_selectator4" type="button">
初始化插件
在頁面DOM元素加載完畢之后,可以通過selectator()方法來初始化該下拉列表插件。
$('#selectBox').selectator();
你也可以直接使用標簽來初始化它:
<select multiple class="selectator" data-selectator-keep-open="true">
配置參數(shù)
$('#selectBox').selectator({
prefix: 'selectator_', // CSS class prefix
height: 'auto', // auto or element
useDimmer: false, // dims the screen when option list is visible
u**arch: true, // if false, the search boxes are removed and
// `showAllOptionsOnFocus` is forced to true
keepOpen: false, // if true, then the dropdown will not close when
// selecting options, but stay open until losing focus
showAllOptionsOnFocus: false, // shows all options if input box is empty
selectFirstOptionOnSearch: true, // selects the topmost option on every search
searchCallback: function(value){}, // Callback function when enter is pressed and
// no option is active in multi select box
labels: {
search: 'Search...' // Placeholder text in search box in single select box
}
});
其它可用的屬性標簽
通過使用data-left、data-right和data-subtitle標簽你可以擴展下拉列表的顯示信息。它們可以通過CSS來設置樣式,CSS的前綴為:prefix_title、prefix_left、prefix_right和prefix_subtitle。這些數(shù)據(jù)都是純HTML代碼,所以你也可以使用圖片代碼。
<select id="selectBox"> <!-- Normal option tag --> <option value="1">This is the title</option> <!-- Extended option tag --> <option value="2" data-left="This is the left section" data-right="This is the right section" data-subtitle="This is the section under the title">This is the title</option> </select>
上的代碼會顯示為類似下面的結構:
CSS類
| class | 描述 |
| prefix_element | 這是一個新的下拉列表框。它帶有相同的額外class類:single 和 multiple ,它們用于設置是單選還是多選。另外 options-visible 和 options-hidden 用于設置選項是否可見 |
| prefix_chosen_items | 被選擇的選項的容器 |
| prefix_chosen_item | 當前被選擇的選項的容器 |
| prefix_chosen_item_title | 當前被選擇的選項的標題 |
| prefix_chosen_item_left | 當前被選擇的選項的左側的內(nèi)容 |
| prefix_chosen_item_right | 當前被選擇的選項的右側的內(nèi)容 |
| prefix_chosen_item_subtitle | 當前被選擇的選項的子標題 |
| prefix_chosen_item_remove | 當前被選擇的選項的移除按鈕 |
| prefix_input | This is the input box for the selectator. This is used together with options-visible or options-hidden to show and style it differently if it is a multiple selection box or a single selection box. |
| prefix_textlength | 用于計算多項選擇框中input的尺寸 |
| prefix_options | 選項列表容器 |
| prefix_group_header | 分組標題 |
| prefix_group | 分組容器 |
| prefix_option | 結果選項。它使用class active 來表明當前激活的選項 |
| prefix_option_title | 結果選項的標題 |
| prefix_option_left | 結果選項左側的內(nèi)容 |
| prefix_option_right | 結果選項右側的內(nèi)容 |
| prefix_option_subtitle | 結果選項右側的子標題 |
| prefix_dimmer | dimmer |
方法
| 方法 | 描述 |
| refresh | 該方法用于刷新插件 |
| destroy | 該方法用于銷毀插件 |
jquery.selectator-custom下拉列表插件的github地址為:
相關文章
jquery異常問題Uncaught?TypeError:?$(...).on?is?not?a?funct
這篇文章主要介紹了jquery異常問題Uncaught?TypeError:?$(...).on?is?not?a?function,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-11-11
jquery內(nèi)置驗證(validate)使用方法示例(表單驗證)
這篇文章主要介紹了jquery內(nèi)置驗證(validate)使用方法示例,在做表單驗證的時候可以用到,下面看代碼使用方法2013-12-12
基于jQuery的公告無限循環(huán)滾動實現(xiàn)代碼
今天看到一個網(wǎng)站的公告欄一個小效果,如果有2條公告或以上就有個滾動效果,特整理下分享給大家2012-05-05
JQuery 拾色器插件發(fā)布-jquery.icolor.js
web項目中不少地方需要用到顏色選擇器,比如設置某個元素的背景色、邊框色等等,按照我們交互設計的期望-設色器最好簡單易用,僅顯示常用的那些色塊給用戶選擇,另外提供一個輸入框方便用戶輸入自定義的色值。2010-10-10

