javascript代码实例教程-jQuery扁平化风格下拉框美化插件FancySelect使用指南

发布时间:2019-01-11 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery扁平化风格下拉框美化插件FancySelect使用指南脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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

使用方法

HTML结构

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

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

FancySelect 也可以通过 <select> 元素的 data-class 属性来指定样式,你可以通过这个方法来指定不同样式的select下拉框。

代码如下:


<select class="basic">
&nbsp; <option value="">Select something…</option>
  <option>Lorem</option>
  <option>Ipsum</option>
  <option>Dolor</option>
  <option>SIT</option>
  <option>amet</option>
</select>

JAVASCRIPT

代码如下:


$(&#39;.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

<script type="text/javascript"> /*720*200 创建于 Saturday, May 06, 2017*/ var cpro_id = "u2972321"; </script><script type="text/javascript" src="https://cpro.baidustatic.COM/cpro/ui/c.js"></script>

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery扁平化风格下拉框美化插件FancySelect使用指南全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery扁平化风格下拉框美化插件FancySelect使用指南所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。