浙江 杭州

jQuery扁平化风格下拉框美化插件

系统分类: 网页特效 - jquery插件 - jQuery文本框特效 2015-10-07

人气8912

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


                                       FancySelect是一款小巧实用的jQuery下拉框美化插件。该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一。

FancySelect是一款小巧实用的jQuery下拉框美化插件。该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一。

使用方法

HTML结构

FancySelect实用十分简单,它可以和jQuery或Zepto结合使用。在页面中放置一些<select>下拉框组件,然后就可以通过.fancySelect()方法来调用该下拉框插件。如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它。

默认情况下,FancySelect 在 iOS 设备上仅使用原生的下拉框和样式。如果你想覆盖它,在下拉框插件初始化的时候设置forceiOStrue即可。

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('FooBar');

mySelect.trigger('update.fs');

启用/禁用下拉框

FancySelect 下拉框插件会在初始化后自动将下拉框设置为disabled禁用状态。如果你需要重新设置下拉框的状态,可以在select元素上使用enable.fsdisable.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

模板

如果你需要制作一些个性效果,可以使用triggerTemplatetriggerTemplate方法,它们都是通过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

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:29.00KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-830.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery扁平化风格下拉框美化插件

我当前G币余额:0 已下载次数:0

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有0 评论)