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 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
解读Vue组件注册方式
May 15 Vue.js
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
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
js单词形式的运算符
2014/05/06 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
vue+iview写个弹框的示例代码
2017/12/05 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
django 取消csrf限制的实例
2020/03/13 Python
python实现图像全景拼接
2020/03/27 Python
python实现批处理文件
2020/07/28 Python
python的dict判断key是否存在的方法
2020/12/09 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
.NET程序员的数据库面试题
2012/10/10 面试题
期中考试后的反思
2014/02/08 职场文书
走群众路线学习笔记
2014/11/06 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
个人求职意向书
2015/05/11 职场文书
MySQL创建管理子分区
2022/04/13 MySQL