@autofe/select v0.1.3

Select

TODO

• 键盘功能支持 Up、Down、Enter、ESC
• 多选支持

Usage

可以通过两种方式来初始化 Select 控件, 你可以根据自己的需要来进行选择.

Via data attributes

无需写 JavaScript , 即可启用下拉框.

<div class="select" data-toggle="select">
  <div class="select__picker" data-select-picker>
    <span class="select__value" data-select-value>选择品牌</span>
    <i class="select__caret"></i>
  </div>
  <div class="select__dropdown" data-select-dropdown>
    <ul>
      <li data-value="1" data-text="阿斯顿·马丁1"><b>A</b><span>阿斯顿·马丁1</span></li>
      <li data-value="2" data-text="阿斯顿·马丁2"><b>A</b><span>阿斯顿·马丁2</span></li>
      <li data-value="3" data-text="阿斯顿·马丁3"><b>A</b><span>阿斯顿·马丁3</span></li>
      <li data-value="4" data-text="阿斯顿·马丁4"><b>B</b><span>阿斯顿·马丁4</span></li>
      <li data-value="5" data-text="阿斯顿·马丁5"><b>C</b><span>阿斯顿·马丁5</span></li>
      <li data-value="6" data-text="阿斯顿·马丁6"><b>D</b><span>阿斯顿·马丁6</span></li>
    </ul>
  </div>
</div>

Via JavaScript

直接在对应的下拉框 DOM 上调用即可.

$('#select').select(options);

Options

参数可以通过 data attributes 或者 JavaScript 两种方式来配置.

Methods

.select(options)

初始化当前 DOM 内容为一个下拉框, 可以接受参数进行配置.

$('#select').select({});

.select('show')

手动打开对话框.

$('#select').select('show');

.select('hide')

手动关闭对话框.

$('#select').select('hide');

.select('toggle')

手动打开或者关闭.

$('#select').select('toggle');

.select('disable')

禁用.

$('#select').select('disable');

.select('enable')

非禁用.

$('#select').select('enable');

.data('fe.select').setValue({})

设置值

.data('fe.select').getValue()

获取值

Event

$('#select').on('show.fe.select', function (e) {
  // 阻止下拉框打开
  e.preventDefault();
});

End

Thanks to Bootstrap