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 相关文章推荐
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
antd table按表格里的日期去排序操作
Nov 17 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 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 字符串操作入门教程
2006/12/06 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
React组件的三种写法总结
2017/01/12 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
Python实现读取文件最后n行的方法
2017/02/23 Python
python中Apriori算法实现讲解
2017/12/10 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
如何基于python实现归一化处理
2020/01/20 Python
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
人事专员的职责
2014/02/26 职场文书
疾病证明书
2015/06/19 职场文书
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server
js判断两个数组相等的5种方法
2022/05/06 Javascript