jQuery扁平化风格下拉框美化插件FancySelect使用指南
作者:bea
FancySelect是一款小巧实用的jQuery下拉框美化插件。该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一。 使用方法 HTML结构 FancySelect实用十分简单,它可以和jQuery或Zepto结合使用。在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件。如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它。 默认情况下,FancySelect
FancySelect是一款小巧实用的jQuery下拉框美化插件。该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一。
使用方法
HTML结构
FancySelect实用十分简单,它可以和jQuery或Zepto结合使用。在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件。如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它。
默认情况下,FancySelect 在 iOS 设备上仅使用原生的下拉框和样式。如果你想覆盖它,在下拉框插件初始化的时候设置 forceiOS 为 true 即可。
FancySelect 也可以通过 <select> 元素的 data-class 属性来指定样式,你可以通过这个方法来指定不同样式的select下拉框。
代码如下:
<select class="basic">
<option value="">Select something…</option>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
<option>Sit</option>
<option>Amet</option>
</select>
JAVASCRIPT
代码如下:
$('.basic').fancySelect();
更新options
如果你的下拉框的 options 在插件初始化后被修改了,你可以通过在下拉框上触发 update.fs 方法来告诉插件更新options列表。
代码如下:
var mySelect = $('.my-select');
mySelect.fancySelect();
mySelect.append('');
mySelect.trigger('update.fs');
启用/禁用下拉框
FancySelect 下拉框插件会在初始化后自动将下拉框设置为 disabled 禁用状态。如果你需要重新设置下拉框的状态,可以在 select 元素上使用 enable.fs 或 disable.fs 方法来修改它们。
代码如下:
<select class="my-select" disabled>
<option>First Option</option>
<option>Second Option</option>
</select>
var mySelect = $('.my-select');
mySelect.fancySelect(); // currently disabled because of html property
// later…
mySelect.trigger('enable.fs'); // now enabled
// even later…
mySelect.trigger('disable.fs'); // now disabled again
如果你需要制作一些个性效果,可以使用 triggerTemplate 和 triggerTemplate 方法,它们都是通过 option 选项来返回一个HTML字符串:
代码如下:
<select class="bulbs">
<option data-icon="old">Incandescent</option>
<option data-icon="curly">CFL</option>
<option data-icon="work">Halogen</option>
</select>
$('.bulbs').fancySelect({
optionTemplate: function(optionEl) {
return optionEl.text() + '
'; } })
你可以在 <select> 下拉框框选项改变的时候监听 change.fs 事件:
代码如下:
<select class="my-select" disabled>
<option>First Option</option>
<option>Second Option</option>
</select>
var mySelect = $('.my-select');
mySelect.fancySelect().on('change.fs', function() {
$(this).trigger('change.$');
}); // trigger the DOM's change event when changing FancySelect
有用 | 无用
使用方法
HTML结构
FancySelect实用十分简单,它可以和jQuery或Zepto结合使用。在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件。如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它。
默认情况下,FancySelect 在 iOS 设备上仅使用原生的下拉框和样式。如果你想覆盖它,在下拉框插件初始化的时候设置 forceiOS 为 true 即可。
FancySelect 也可以通过 <select> 元素的 data-class 属性来指定样式,你可以通过这个方法来指定不同样式的select下拉框。
代码如下:
<select class="basic">
<option value="">Select something…</option>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
<option>Sit</option>
<option>Amet</option>
</select>
JAVASCRIPT
代码如下:
$('.basic').fancySelect();
更新options
如果你的下拉框的 options 在插件初始化后被修改了,你可以通过在下拉框上触发 update.fs 方法来告诉插件更新options列表。
代码如下:
var mySelect = $('.my-select');
mySelect.fancySelect();
mySelect.append('');
mySelect.trigger('update.fs');
启用/禁用下拉框
FancySelect 下拉框插件会在初始化后自动将下拉框设置为 disabled 禁用状态。如果你需要重新设置下拉框的状态,可以在 select 元素上使用 enable.fs 或 disable.fs 方法来修改它们。
代码如下:
<select class="my-select" disabled>
<option>First Option</option>
<option>Second Option</option>
</select>
var mySelect = $('.my-select');
mySelect.fancySelect(); // currently disabled because of html property
// later…
mySelect.trigger('enable.fs'); // now enabled
// even later…
mySelect.trigger('disable.fs'); // now disabled again
如果你需要制作一些个性效果,可以使用 triggerTemplate 和 triggerTemplate 方法,它们都是通过 option 选项来返回一个HTML字符串:
代码如下:
<select class="bulbs">
<option data-icon="old">Incandescent</option>
<option data-icon="curly">CFL</option>
<option data-icon="work">Halogen</option>
</select>
$('.bulbs').fancySelect({
optionTemplate: function(optionEl) {
return optionEl.text() + '
'; } })
你可以在 <select> 下拉框框选项改变的时候监听 change.fs 事件:
代码如下:
<select class="my-select" disabled>
<option>First Option</option>
<option>Second Option</option>
</select>
var mySelect = $('.my-select');
mySelect.fancySelect().on('change.fs', function() {
$(this).trigger('change.$');
}); // trigger the DOM's change event when changing FancySelect
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JavaScript中的分号插入机制详细介绍
- Javascript核心读书有感之语句
- JavaScript数据结构和算法之二叉树详解
- JavaScript中的函数模式详解
- Javascript核心读书有感之表达式和运算符
- JavaScript数据结构和算法之图和图算法
- Javascript核心读书有感之类型、值和变量
- JavaScript中的继承方式详解
- JavaScript中原型和原型链详解
- Node.js中的缓冲与流模块详细介绍
- javascript中var的重要性分析
- JavaScript设计模式之工厂模式和构造器模式
- js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
- 45个JavaScript编程注意事项、技巧大全
- JS实现判断碰撞的方法
- javascript异步编程代码书写规范Promise学习笔记
- jquery实现动态操作select选中
- JS操作HTML自定义属性的方法
- jQuery制作仿Mac Lion OS滚动条效果