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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
js常用代码段收集
Oct 28 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
js实现表格字段排序
Feb 19 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
详解js的六大数据类型
Dec 27 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 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
xajax写的留言本
2006/11/25 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
JavaScript confirm选择判断
2008/10/18 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
vue实现文字加密功能
2019/09/27 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python zip文件 压缩
2008/12/24 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
Python如何为图片添加水印
2016/11/25 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
实习生自我鉴定范文
2013/12/05 职场文书
学年末自我鉴定
2014/01/21 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
java实现面板之间切换功能
2022/06/10 Java/Android