基于Bootstrap仿Github样式下拉列表框插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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