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

前端之家收集整理的这篇文章主要介绍了jQuery扁平化风格下拉框美化插件FancySelect使用指南前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

使用方法

HTML结构

FancySelect实用十分简单,它可以和jQuery或Zepto结合使用。在页面中放置一些 元素的 data-class 属性来指定样式,你可以通过这个方法来指定不同样式的select下拉框。

代码如下:

JAVASCRIPT

代码如下:

更新options

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

代码如下:

启用/禁用下拉框

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

代码如下:
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字符串:

代码如下:

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

原文链接:https://www.f2er.com/jquery/55788.html

猜你在找的jQuery相关文章