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插件集合
Jan 12 Javascript
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 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 和 MySQL 基础教程(四)
2006/10/09 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Python数据类型学习笔记
2016/01/13 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python把转列表为集合的方法
2019/06/28 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
领导的自我鉴定
2013/12/28 职场文书
2015年考研复习计划
2015/01/19 职场文书
人事任命通知
2015/04/20 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
安全生产标语口号
2015/12/26 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis