表单/表格
仿Github样式下拉列表框插件
PetitQ
bootstrap-dropselect 是一款基于 Bootstrap 的仿 Github 样式实用下拉列表框插件。该下拉列表的插件功能类似于 Github 上的下拉列表框。它使用原生的 Bootstrap dropdown 改造而成，非常的实用和美观。
HTML 结构
该下拉列表框插件的 HTML 结构采用标准的 Bootstrap dropdownHTML 结构。
也想出现在这里？联系我们吧
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul id="dropselect-demo1" class="dropdown-menu">
<li data-value="action_value"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li data-value="another_action"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li data-selected="true"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
初始化插件
在页面 DOM 元素加载完毕之后，通过 jQuery 获取<ul>元素，然后在它上面调用 dropselect()方法。
$(function() {
$('#dropselect-demo1').dropselect();
})
配置参数
下面是该下拉列表框的可用参数
| 参数 | 类型 | 默认值 | 描述 |
| multiselect | boolean | false | 如果设置为true可以进行多选 |
| clear | mixed | { show: true, label: 'Clear selected' } |
可选项，允许清除项目。也可以传入布尔值true来使用它 |
| filter | mixed | { show: true, placeholder: 'Search', casesensitive: false, noresult: 'No results found' } |
可选项，使过滤文本框可用。也可以传入布尔值true来使用它 |
| onclear | callback | clear事件触发时的回调函数 |
|
| onselect | callback | select事件触发时的回调函数 |
|
| onunselect | callback | unselect事件触发时的回调函数 |
|
| ontoggle | callback | toggle事件触发时的回调函数 |
|
| onchange | callback | change事件触发时的回调函数 |
|
| icons | boolean | true | 是否显示 check 图标 |
| width | mixed | 300 | 下拉列表框的宽度 |
| items | mixed | "markup" | 默认的列表项 |
事件
| 事件 | 回调参数 | 描述 |
| select | object项 |
在选择一个列表项后触发 |
| unselect | object项 |
在取消选择一个列表项后触发 |
| clear | 在清除列表项后触发 | |
| toggle | object项或boolean |
当列表项切换时触发 |
| change | 当雷波县的状态改变时触发 |
方法
| 方法 | 参数 | 描述 |
| toggle(index) | 基于 0 开始的 index | 切换一个列表项的选择状态 |
| clear | 清空所有的选择项 | |
| select(index) | 基于 0 开始的 index | 手动选择指定 index 的列表项 |
| unselect(index) | 基于 0 开始的 index | 手动取消选择指定 index 的列表项 |
| showLoading | 显示 loading 指示器 | |
| hideLoading | 隐藏 loading 指示器 | |
| hide | 完全隐藏下拉列表框 | |
| item | 基于 0 开始的 index | 通过 index 获取列表项object对象。返回{ item: ITEM_VALUE, text: ITEM_TEXT, icon: DEFAULT_ITEM_ICON, $element: LI_ELEMENT } |
| destroy | 销毁下拉列表框对象实例 |
应用举例
$(function() {
var mydropselect = $('#my-dropselect').dropselect({
filter: {
show: true,
placeholder: 'Search for an item'
},
multiselect: true
});
mydropselect.on('select', function(e, item) {
console.log(item);
console.log(e.selectedItem);
// use e.selectedItems to get an array of selected items (useful for multiselect)});
$('#clear-button').on('click', function() {
mydropselect.dropselect('clear');
})
$('#toggle-item-3').on('click', function() {
mydropselect.dropselect('showLoading');
mydropselect.dropselect('toggle', 3);
})
})
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
