成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

Selectator是一款實(shí)現(xiàn)多選和搜索過濾功能的jQuery下拉列表框插件。它支持搜索，并且能直接影響原始的選擇框，而原始的選擇框是用作數(shù)據(jù)容器。通過該下拉列表框插件可以多選項(xiàng)進(jìn)行分組，設(shè)置選項(xiàng)的圖標(biāo)，對(duì)選項(xiàng)進(jìn)行搜索過濾，以及進(jìn)行多選選擇。

效果展示 源碼下載

使用方法

使用該下拉類別框插件需要在頁面中引入fm.selectator.jquery.css、jQuery和fm.selectator.jquery.js文件。

<link rel="stylesheet" />
<script src="http://www.gimoo.net/t/1903/jquery-1.11.0.min.js"></script>
<script src="http://www.gimoo.net/t/1903/fm.selectator.jquery.js"></script>

HTML結(jié)構(gòu)

一個(gè)選項(xiàng)帶圖標(biāo)級(jí)帶分組選項(xiàng)的下拉列表的HTML結(jié)構(gòu)如下：

<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='http://www.gimoo.net/t/1903/images/ingi.png'>" data-right="1">One</option>
<option value="2" class="option_two" data-subtitle="To" data-left="<img src='http://www.gimoo.net/t/1903/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='http://www.gimoo.net/t/1903/images/jogvan.png'>" data-right="3">Three</option>
<option value="4" class="option_four" selected data-left="<img src='http://www.gimoo.net/t/1903/images/noimage.png'>" data-right="4">Four</option>
<option value="5" class="option_five" selected data-left="<img src='http://www.gimoo.net/t/1903/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();

你也可以直接使用標(biāo)簽來初始化它：

<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
}
});

其它可用的屬性標(biāo)簽

通過使用data-left、data-right和data-subtitle標(biāo)簽?zāi)憧梢詳U(kuò)展下拉列表的顯示信息。它們可以通過CSS來設(shè)置樣式，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>

上的代碼會(huì)顯示為類似下面的結(jié)構(gòu)：

CSS類

class 描述 prefix_element 這是一個(gè)新的下拉列表框。它帶有相同的額外class類：single 和 multiple ，它們用于設(shè)置是單選還是多選。另外 options-visible 和 options-hidden 用于設(shè)置選項(xiàng)是否可見 prefix_chosen_items 被選擇的選項(xiàng)的容器 prefix_chosen_item 當(dāng)前被選擇的選項(xiàng)的容器 prefix_chosen_item_title 當(dāng)前被選擇的選項(xiàng)的標(biāo)題 prefix_chosen_item_left 當(dāng)前被選擇的選項(xiàng)的左側(cè)的內(nèi)容 prefix_chosen_item_right 當(dāng)前被選擇的選項(xiàng)的右側(cè)的內(nèi)容 prefix_chosen_item_subtitle 當(dāng)前被選擇的選項(xiàng)的子標(biāo)題 prefix_chosen_item_remove 當(dāng)前被選擇的選項(xiàng)的移除按鈕 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 用于計(jì)算多項(xiàng)選擇框中input的尺寸 prefix_options 選項(xiàng)列表容器 prefix_group_header 分組標(biāo)題 prefix_group 分組容器 prefix_option 結(jié)果選項(xiàng)。它使用class active 來表明當(dāng)前激活的選項(xiàng) prefix_option_title 結(jié)果選項(xiàng)的標(biāo)題 prefix_option_left 結(jié)果選項(xiàng)左側(cè)的內(nèi)容 prefix_option_right 結(jié)果選項(xiàng)右側(cè)的內(nèi)容 prefix_option_subtitle 結(jié)果選項(xiàng)右側(cè)的子標(biāo)題 prefix_dimmer dimmer

方法

方法 描述 refresh 該方法用于刷新插件 destroy 該方法用于銷毀插件

jquery.selectator-custom下拉列表插件的github地址為：

https://github.com/Lepshey/jquery.selectator-custom