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

 这篇文章主要介绍了jQuery扁平化风格下拉框美化插件FancySelect使用指南,需要的朋友可以参考下

 
 

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

时间: 2016-02-11

jQuery扁平化风格下拉框美化插件FancySelect使用指南的相关文章

jquery实现省市select下拉框的替换

 本篇文章主要是对jquery实现省市select下拉框的替换(示例代码)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 省市对应的实现:<还有一些没封装起来>    更具选择的省份来确定市的内容   jsp代码:    代码如下: <body>   省份<select name="prin">    <option>--请选择--</option>    <option>福建</option>

jquery取消选择select下拉框示例代码

 本篇文章主要是对jquery取消选择select下拉框示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 有三个select下拉框 一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项 这需求有点儿..........   下面是三个select:   代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()">

代码-java jquery里多个下拉框并列下来,狠高深

问题描述 java jquery里多个下拉框并列下来,狠高深 就比如 一 二 三 四 五 每个大写的数字代表一个下拉框 每个下拉框里面还有他自己的子项,怎么写代码能实现 一 ⑴ ⑵ 二 三 ⑴ ⑵ 四 五 或者都點開,麻煩大神了... 解决方案 我的QQ 765278009 謝謝了 解决方案二: 网上这种例子应该不少,你参考一下代码,结合自己的需求看看,http://www.cnblogs.com/wintersun/archive/2009/05/28/1491323.html 解决方案三:

jquery取消选择select下拉框示例代码_jquery

有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: 复制代码 代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()">        <option value="">全部</option>   

基于jquery扩展漂亮的下拉框可以二次修改_jquery

继续发一篇关于web前端自定义控件--ComboBox(下拉框),以往我在使用下拉框控件老是为了样式丑陋而烦恼,现在分享这个控件,希望有用的同仁们可以收藏,或进行二次修改,达到你想要的效果. 分解自定义下拉框: 1.创建构造函数,初始化赋值控件值. 2.绑定控件呈现在前台. 3.点击下拉框控件,展示下拉列表 4.点击触发下拉框控件,收起下拉列表. 5.点击下拉项触发事件. 代码如下: Html代码: 复制代码 代码如下: <b class="select_type"><

jQuery制作简洁的多级联动Select下拉框_jquery

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码 代码如下:  <div class="wrap">         <div class="nice-select" name="nice-select

用Java SWT实现MSN风格的下拉框

SWT一个所谓的优点是它的本地化外观,因为它是通过JNI调用操作系统的组件,从而可以保证外观上适合大多数用户的需求,但是一些IM类软件商往往希望它们的产品有着一套独特的外观,这对SWT这种原生组件来说就有些力不从心了,严格来说如果你的用户对外观要求比较苛刻,那么Swing是首选,因为L&F机制可以确保你做到这一点,另外Swing还有着许多SWT不具备的优点,例如半透明组件.渲染等,但是少数的这些特性用SWT还是可以模拟的,本文就向大家介绍如何通过自定义组件实现MSN风格的下拉框. 通常来说,SW

用jQuery获取IE9下拉框默认值问题探讨

本文与大家详细探讨下用jQuery获取IE9下拉框默认值的问题,如果下拉框没有空默认值会怎么样等一系列问题,感兴趣的朋友可以参考下哈,希望对大家有所帮助   在IE 9.0.8112.16421 下,如果下拉框没有空默认值, 在不对它的option设置select属性情况下,用jquery的 $("#id").find("option:selected").val();方法 将无法取到他的默认值.而在FireFox.chrome.其他IE版本包括IE9的其他小版本下

jquery动态加载select下拉框示例代码

 动态加载select下拉框的实现方法有很多,在接下来的文章中为大家介绍下jquery是如何实现的 如题,直接上代码,实战学习.  代码如下: <head><title>jquery实现动态加载select下拉选项</title>  <script type="text/javascript">  function init(){  makemoduleSelect();  }  //加载模板下拉框选项  function makemod