切换器

用法

我们给列表添加data-toggle="switcher"绑定切换效果。 

                                
                               <div class="ebank-wrap">
                               
   <ul class="ebanks"  data-toggle="switcher">
                               
      <li class="active">
                               
         <label class="ebank-label">
                               
            <i></i>
                               
            <span class="etag"> 企业（个人） </span>
                               
            <span class="ebank-logo （bank-...）"></span>
                               
            <input type="radio" style="display: none;" name="ebank/>
                               
         </label>
                               
      </li>
                               
      <li>
                               
         <label class="more-ebank">
                               
            查看更多
                               
         </label>
                               
      </li>
                               
   </ul>
                               
</div>

多选

我们通过配置except:true设置不撤销已选项进行多选效果。 

                                
                               <div class="ebank-wrap">
                               
   <ul class="ebanks"  data-toggle="switcher"  data-except="true">
                               
      <li class="active">
                               
         <label class="ebank-label">
                               
            <i></i>
                               
            <span class="etag"> 企业（个人） </span>
                               
            <span class="ebank-logo （bank-...）"></span>
                               
            <input type="radio" style="display: none;" name="ebank/>
                               
         </label>
                               
      </li>
                               
      <li>
                               
         <label class="more-ebank">
                               
            查看更多
                               
         </label>
                               
      </li>
                               
   </ul>
                               
</div>

配置

通过jQuery插件方式传入参数或使用data-*配置参数方式。

属性 默认值 描述
item li 切换器子项选择器
active active 选中激活的样式名
except false 是否多选
keep false 选中不取消 
                                
                                    <ul class="ebanks"  data-toggle="switcher" data-item=".item" data-active="current"  data-except="true">

事件监听

通过监听元素的select.ui.switcher事件 

   $('#j-switcher-1').on('select.ui.switcher', function(){
        alert(this.id)
        alert(e.relatedTarget.html())
    })

jQuery插件绑定

我们使用$(element).switcher(options)来绑定切换功能。

扩展

我们利用switcher扩展一个手风琴效果

  • 1. 什么是XX宝？

    xx宝是XX公司携手招商银行共同打造的一款支付交易及余额增值产品，面向平台用户7*24小时提供全程在线操作、高效跨行身份验证、免费跨行结算、余额享受增值权益等定制化产品及服务，由钱途互联负责运营。

  • 2. XX宝的优势？

    免费：使用XX宝，充值、支付、提现等所有交易免费结算，再也不用支付高昂结算费用。
    安全：使用XX宝，招商银行提供服务，交易资金安全无忧。
    便捷：支持使用多家银行账户在线跨行交易，提供强大的电子交易凭证功能满足公司账务需求。
    增值：XX宝内余额可享稳健收益。
    其他：平台可根据业务需求，推出其他用户权益。
$.fn.accordion = function(option){
        var defaults = {
            item: 'li',
            target: '>div',
            active: 'active',
            except: false
        };

        option = $.extend({}, defaults, option);

        // 直接调用
        $(this).switcher(option);

        // 事件监听
        return $(this).each(function(){
            var $items = $(this).find(option.item);
            $(this).on('select.ui.switcher', function(e){
                var $this = $(e.relatedTarget), has = $this.hasClass(option.active), $actived = $items.find(option.target), $target = $this.find(option.target);
                !!!(option.except) && $actived.slideUp();
                $target.stop()[!has ? 'slideUp': 'slideDown']();
            });
        });
    };

    $('#j-switcher-2').accordion();