jQuery扁平化风格下拉框美化插件FancySelect使用指南

FancySelect是一款小巧实用的jQuery下拉框美化插件。该下拉框美化插件采用扁平化设计风格，是追求时尚的开发者的首选下拉框美化插件之一。

使用方法

HTML结构

FancySelect实用十分简单，它可以和jQuery或Zepto结合使用。在页面中放置一些 下拉框组件，然后就可以通过 .fancySelect() 方法来调用该下拉框插件。如果下拉框中有某个选项没有值，该插件会使用某种占位文字来代替它。

默认情况下，FancySelect 在 iOS 设备上仅使用原生的下拉框和样式。如果你想覆盖它，在下拉框插件初始化的时候设置 forceiOS 为 true 即可。

FancySelect 也可以通过

元素的 data-class 属性来指定样式，你可以通过这个方法来指定不同样式的select下拉框。

代码如下:

Lorem Ipsum Dolor Sit Amet

JAVASCRIPT

代码如下:

更新options

如果你的下拉框的 options 在插件初始化后被修改了，你可以通过在下拉框上触发 update.fs 方法来告诉插件更新options列表。

代码如下:

启用/禁用下拉框

FancySelect 下拉框插件会在初始化后自动将下拉框设置为 disabled 禁用状态。如果你需要重新设置下拉框的状态，可以在 select 元素上使用 enable.fs 或 disable.fs 方法来修改它们。

代码如下:

First Option Second Option 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字符串：

代码如下:

$('.bulbs').fancySelect({ optionTemplate: function(optionEl) { return optionEl.text() + ' '; } })

你可以在 下拉框框选项改变的时候监听 change.fs 事件：

代码如下:

First Option Second Option

var mySelect = $('.my-select'); mySelect.fancySelect().on('change.fs',function() { $(this).trigger('change.$'); }); // trigger the DOM's change event when changing FancySelect

原文地址：https://www.jb51.cc/jquery/55788.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：jQuery内容过滤选择器用法分析下一篇：jQuery制作仿Mac Lion OS滚动条效果