|
表單元素讓人愛恨交加,。作為網(wǎng)頁最重要的組成部分，表單幾乎無處不在，從簡單的郵件訂閱,、登陸注冊到復(fù)雜的需要多頁填寫的信息提交功能,，表單都讓開發(fā)者花費(fèi)了大量的時(shí)間和精力去處理,，以期實(shí)現(xiàn)好用又漂亮的表單功能,。這篇文章分享幾款很棒的 JavaScript 下拉列表功能增強(qiáng)插件。
您可能感興趣的相關(guān)文章
Selectize.js
Selectize 是一個(gè)基于 jQuery 的 <select> UI 控件,，對于標(biāo)簽選擇和下拉列表功能非常有用,。
Selectize 的目標(biāo)是通過簡單而強(qiáng)大的 API 提供堅(jiān)實(shí)可用的用戶體驗(yàn)。
主要特色：
- 簡潔的 API,，有詳細(xì)的幫助文檔,；
- 支持智能排序和多屬性搜索，甚至可以使用打分函數(shù)進(jìn)行排序的,；
- 支持鍵盤操作,，對用戶使用友好；
- 支持同時(shí)選擇和刪除多個(gè)項(xiàng)目,；
- 支持遠(yuǎn)程數(shù)據(jù)加載,，例如 Ajax 調(diào)用；
使用示例：
單選選擇
1 2 3 4 | $('#select-beast').selectize({
create: true,
sortField: 'text'
});
|
多項(xiàng)選擇
1 2 3 | $('#select-state').selectize({
maxItems: 3
});
|
插件下載 在線演示
FancySelect
FancySelect 這款插件是 Web 開發(fā)中下拉框功能的一個(gè)更好的選擇,。
FancySelect 使用方便,，只要綁定頁面上的任何 Select 元素，并調(diào)用就 .fancySelect() 就可以了,。
默認(rèn)情況下,，F(xiàn)ancySelect 在移動(dòng)設(shè)備上使用原生的選擇功能和風(fēng)格。
使用示例：
1 2 3 4 5 6 7 8 9 10 | <select class="basic">
<option value="">Select something…</option>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
<option>Sit</option>
<option>Amet</option>
</select>
$('.basic').fancySelect();
|
插件下載 在線演示
Chosen
Chosen 是最流行的 jQuery 選擇功能插件,，也是我最喜歡,，最好用的一個(gè)！
Chosen 可以幫助你輕松構(gòu)建用戶友好的漂亮選擇功能,，可以把多選轉(zhuǎn)換為基于標(biāo)簽的輸入域,。
特色功能：
- 用戶友好的下拉選擇功能，支持搜索,；
- 基于標(biāo)簽的多項(xiàng)選擇功能,；
- 支持設(shè)置選中和無效選項(xiàng)；
- 支持修改和更新事件,；
使用示例：
隱藏搜索的單選功能
1 | $(".chosen-select").chosen({disable_search_threshold: 10});
|
設(shè)置多選的最大選擇數(shù)
1 | $(".chosen-select").chosen({max_selected_options: 5});
|
監(jiān)聽更新事件
1 | $("#form_field").chosen().change( … );
|
手動(dòng)觸發(fā)更新
1 | $("#form_field").trigger("chosen:updated");
|
自定義寬度
1 | $(".chosen-select").chosen({width: "95%"});
|
插件下載 在線演示
DropKick
DropKick 可以幫助你把已有的煩人的 <select> 列表轉(zhuǎn)換為漂亮的,，可定制的下拉菜單。
使用示例：
默認(rèn)調(diào)用
1 | $('.default').dropkick();
|
自定義更新事件
1 2 3 4 5 | $('.change').dropkick({
change: function (value, label) {
alert('You picked: ' + label + ':' + value);
}
});
|
自定義皮膚
1 2 3 4 5 6 | $('.custom_theme').dropkick({
theme: 'black',
change: function (value, label) {
$(this).dropkick('theme', value);
}
});
|
插件下載 在線演示
ddSlick
這款免費(fèi),、輕量的 jQuery 選擇功能插件讓你可以輕松創(chuàng)建帶有圖片和描述的自定義下拉菜單,。
使用示例：
使用 JSON 數(shù)據(jù)
1 2 3 4 5 6 7 8 9 | $('#demoBasic').ddslick({
data: ddData,
width: 300,
imagePosition: "left",
selectText: "Select your favorite social network",
onSelected: function (data) {
console.log(data);
}
});
|
獲取選中項(xiàng)
1 2 3 4 5 6 7 8 9 | $('#demoShowSelected').ddslick({
data: ddData,
selectText: "Select your favorite social network",
});
$('#showSelectedData').on('click', function () {
var ddData = $('#demoShowSelected').data('ddslick');
displaySelectedData("2: Getting Selected Dropdown Data" , ddData);
});
|
設(shè)置選中項(xiàng)
1 2 3 4 5 6 7 8 9 10 11 12 | $('#demoSetSelected').ddslick({
data: ddData,
selectText: "Select your favorite social network"
});
$('#btnSetSelected').on('click', function () {
var i = $('#setIndex').val();
if(i >= 0 && i <5)
$('#demoSetSelected').ddslick('select', {index: i });
else
$('#setIndexMsg').effect('highlight',2400);
});
|
插件下載 在線演示
Select2
Select 2 是一款用于替代傳統(tǒng)的網(wǎng)頁下拉框的 jQuery 插件，支持搜索、遠(yuǎn)程數(shù)據(jù)和無限滾動(dòng)等功能,。
使用示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <head>
<link href="select2.css" rel="stylesheet"/>
<script src="select2.js"></script>
<script>
$(document).ready(function() { $("#e1").select2(); });
</script>
</head>
<body>
<select id="e1">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
</body>
|
插件下載 在線演示
您可能感興趣的相關(guān)文章
本文鏈接：推薦幾款很棒的 JavaScript 下拉列表功能增強(qiáng)插件
編譯來源：夢想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計(jì)資源
|
