按钮图标
FancySelect - 扁平化风格下拉框美化jQuery插件
PetitQ
FancySelect 是一款小巧实用的 jQuery 下拉框美化插件。该下拉框美化插件采用扁平化设计风格，是追求时尚的开发者的首选下拉框美化插件之一。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('<option>Foo</option><option>Bar</option>');
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() + '<div class="icon-' + optionEl.data('icon') + '"></div>';
}})
事件
你可以在<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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
