Select.js是一款基于Tether的select下拉选择框美化插件。 该下拉框美化插件内置3种皮肤主题。它在原生select元素的基础上通过Javascript和CSS来进行改造,并通过Tether插件来进行下拉框的定位。
安装
可以通过npm和bower来安装select.js插件。
$ npm install tether-select $ bower install tether-select
使用方法
HTML结构
可以对任何原生的select元素进行美化。
<select data-select-like-alignement="never" class="drop-select"> <option value="potato-chips">Potato chips</option> <option value="chips-and-salsa">Chips and salsa</option> <option value="cookies">Cookies</option> <option value="doritos">Doritos</option> <option value="pringles">Pringles</option> <option value="hot-pockets">Hot pockets</option> </select>
初始化插件
可以通过new Select()
方法来实例化一个下拉框对象。
new Select({ el: selectElement });
如果要对页面中的所有select下拉框进行美化,可以使用下面的方法。
Select.init();
也可以通过selector
参数来对指定的选择器元素进行美化。
Select.init({ selector: '.my-select' });
还可以通过className
参数来指定使用的主题。
Select.init({ className: 'select-theme-dark' });
Select 对象
Select
构造函数会返回一个Select
对象。你可以通过.selectInstance
属性来获取Select示例对象。
var MySelect; MySelect = new Select({ el: myElement }); new Select({ el: myElement }); MySelect = el.selectInstance;
Select
有以下以下可用的方法:
-
.close()
:如果下拉框打开则关闭它。 -
.open()
:如果下拉框关闭则打开它。 -
.toggle()
:切换下拉框的打开和关闭状态。 -
.isOpen()
:如果下拉框处于打开状态返回true。 -
.change(val)
:使下拉框选择参数指定的选项。 -
.update()
:更新下拉框。 -
.value
:返回当前下拉框选择的值。
你还可以为select对象绑定事件。
-
.on(event, handler, [context])
:绑定一个事件。 -
.off(event, [handler])
:解绑一个事件。 -
.once(event, handler, [context])
:绑定一个只执行一次的事件。 -
:
可用主题
该下拉框有三种可用的主题:通过className参数来进行设置。
- 默认主题,不需要传入参数。
select-theme-dark
select-theme-chosen
select.js插件的github地址为:http://github.hubspot.com/select/
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!