UDN-企业互联网技术人气社区

板块导航

浏览  : 585
回复  : 2

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

[复制链接]
山外青山的头像 楼主
发表于 2016-12-13 16:21:59 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了jQuery扁平化风格下拉框美化插件FancySelect使用指南,需要的朋友可以参考下

  FancySelect是一款小巧实用的jQuery下拉框美化插件。该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一。
  
  使用方法
  
  HTML结构
  
  FancySelect实用十分简单,它可以和jQuery或Zepto结合使用。在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件。如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它。
  
  默认情况下,FancySelect 在 iOS 设备上仅使用原生的下拉框和样式。如果你想覆盖它,在下拉框插件初始化的时候设置 forceiOS 为 true 即可。
  
  FancySelect 也可以通过 <select> 元素的 data-class 属性来指定样式,你可以通过这个方法来指定不同样式的select下拉框。
  
  复制代码 代码如下:
 


  1. <select class="basic">

  2.   <option value="">Select something…</option>

  3.   <option>Lorem</option>

  4.   <option>Ipsum</option>

  5.   <option>Dolor</option>

  6.   <option>Sit</option>

  7.   <option>Amet</option>

  8. </select>
复制代码

  
  JavaScript
  
  复制代码 代码如下:  
  
  1. $('.basic').fancySelect();
复制代码
 
  更新options
  
  如果你的下拉框的 options 在插件初始化后被修改了,你可以通过在下拉框上触发 update.fs 方法来告诉插件更新options列表。
  
  复制代码 代码如下:


  1. var mySelect = $('.my-select');

  2. mySelect.fancySelect();

  3. mySelect.append('');

  4. mySelect.trigger('update.fs');
复制代码
 
  启用/禁用下拉框
  
  FancySelect 下拉框插件会在初始化后自动将下拉框设置为 disabled 禁用状态。如果你需要重新设置下拉框的状态,可以在 select 元素上使用 enable.fs 或 disable.fs 方法来修改它们。
  
  复制代码 代码如下:


  1. <select class="my-select" disabled>

  2.     <option>First Option</option>

  3.     <option>Second Option</option>

  4. </select>

  5. var mySelect = $('.my-select');

  6. mySelect.fancySelect(); // currently disabled because of html property

  7. // later…

  8. mySelect.trigger('enable.fs'); // now enabled

  9. // even later…

  10. mySelect.trigger('disable.fs'); // now disabled again
复制代码
 
  如果你需要制作一些个性效果,可以使用 triggerTemplate 和 triggerTemplate 方法,它们都是通过 option 选项来返回一个HTML字符串:
  
  复制代码 代码如下:


  1. <select class="bulbs">

  2.     <option data-icon="old">Incandescent</option>

  3.     <option data-icon="curly">CFL</option>

  4.     <option data-icon="work">Halogen</option>

  5. </select>

  6. $('.bulbs').fancySelect({

  7.     optionTemplate: function(optionEl) {

  8.         return optionEl.text() + '

  9. '; } })
复制代码
  
  你可以在 <select> 下拉框框选项改变的时候监听 change.fs 事件:
  
  复制代码 代码如下:


  1. <select class="my-select" disabled>

  2.     <option>First Option</option>

  3.     <option>Second Option</option>

  4. </select>

  5. var mySelect = $('.my-select');

  6. mySelect.fancySelect().on('change.fs', function() {

  7.     $(this).trigger('change.  );

  8. }); // trigger the DOM's change event when changing FancySelect
复制代码
  

相关帖子

发表于 2016-12-13 16:22:28 | 显示全部楼层
前排支持下
使用道具 举报

回复

发表于 2016-12-13 16:22:29 | 显示全部楼层
OMG!介是啥东东
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部