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


Posted in Javascript onFebruary 10, 2015

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
Javascript 相关文章推荐
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
原生JavaScript实现换肤
Feb 19 Javascript
javascript中定义类的方法详解
Feb 10 #Javascript
JavaScript判断浏览器类型的方法
Feb 10 #Javascript
javascript定时器完整实例
Feb 10 #Javascript
jQuery搜索子元素的方法
Feb 10 #Javascript
jQuery搜索同辈元素方法
Feb 10 #Javascript
Jquery搜索父元素操作方法
Feb 10 #Javascript
jQuery表单域属性过滤器用法分析
Feb 10 #Javascript
You might like
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
python中split方法用法分析
2015/04/17 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
安全协议书
2014/04/23 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
2015年药店工作总结
2015/04/20 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书