您好,欢迎访问一九零五行业门户网

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

fancyselect是一款小巧实用的jquery下拉框美化插件。该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一。
使用方法
html结构
fancyselect实用十分简单,它可以和jquery或zepto结合使用。在页面中放置一些 下拉框组件,然后就可以通过 .fancyselect() 方法来调用该下拉框插件。如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它。
默认情况下,fancyselect 在 ios 设备上仅使用原生的下拉框和样式。如果你想覆盖它,在下拉框插件初始化的时候设置 forceios 为 true 即可。
fancyselect 也可以通过 元素的 data-class 属性来指定样式,你可以通过这个方法来指定不同样式的select下拉框。
复制代码 代码如下:
select something…
  lorem
  ipsum
  dolor
  sit
  amet
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 方法来修改它们。
复制代码 代码如下:
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字符串:
复制代码 代码如下:
incandescent
    cfl
    halogen
$('.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
其它类似信息

推荐信息