jQuery扁平化风格下拉框美化插件FancySelect使用指南
更新时间：2015年02月10日 16:29:27 投稿：hebedich
这篇文章主要介绍了jQuery扁平化风格下拉框美化插件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
相关文章
这篇文章主要介绍了基于 jQuery 的键盘事件监听控件,需要的朋友可以参考下2019-04-04
如何用javascript获取input输入框中的值，js/jq通过name、id、class获取input输入框中的value。接下来本文通过代码讲解，需要的朋友参考下2019-11-11
我们看到很多网站会有有错误404页面，当页面不存存时就会提示，然后过几秒就会自动跳到首页了，下面我来给大家举一个404错误页面跳到首页实例，有需要的朋友可以参考一下2013-08-08
这篇文章主要介绍了jquery使整个div区域可以点击的方法,涉及jQuery操作页面元素与鼠标事件的技巧,需要的朋友可以参考下2015-06-06
在使用jquery操作js时，经常弄不明白this与$(this)。最近不是很忙，抽空仔细研究了一下，记录下来以供在忘记的时候拉出来参考参考！2014-11-11
Jquery replace 字符替换实现代码，需要的朋友可以参考下。2010-12-12
这篇文章主要介绍了jQuery中:disabled选择器用法,实例分析了:disabled选择器功能、定义及选取所有禁用的表单元素的技巧,需要的朋友可以参考下2015-01-01
本文主要对handlebars+require基本使用方法进行详细介绍，文章尾部会附上完整代码供大家参考。需要的朋友一起来看下吧2016-12-12
使用CSS()方法改变现有的CSS样式表，css()方法在使用上具有多样性，比如要改变链接颜色，如果需要改变多个样式属性，可先定义属性变量，然后直接赋值给css()方法2014-09-09
siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。接下来通过本文给大家介绍jQuery siblings()用法实例详解，需要的朋友参考下吧2016-04-04
最新评论