手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery扁平化风格下拉框美化插件FancySelect使用指南
jQuery扁平化风格下拉框美化插件FancySelect使用指南
摘要:FancySelect是一款小巧实用的jQuery下拉框美化插件。该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件...

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

使用方法

HTML结构

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

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

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

复制代码 代码如下:

<select>

<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 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>

<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 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扁平化风格下拉框美化插件FancySelect使用指南】相关文章:

JQuery插件jcarousellite的参数中文说明

JavaScript中substring()方法的使用

JS实现带缓冲效果打开、关闭、移动一个层的方法

jQuery插件zepto.js简单实现tab切换

基于jquery实现下拉框美化特效

jQuery实现不断闪烁文字的方法

jQuery插件pagewalkthrough实现引导页效果

jQuery切换所有复选框选中状态的方法

jQuery异步上传文件插件ajaxFileUpload详细介绍

jQuery插件制作之全局函数用法实例

精品推荐
分类导航