coupons

功能描述

  1. app优惠券页面模板

快速使用

  1. html中将个class 可以作为切换 tab-active    
  2. <div class="jq22-tab" data-ydui-tab>
  3.     <ul class="tab-nav b-line">
  4.         <li class="tab-nav-item tab-active"><a href="javascript:;"><span>未使用</span></a></li> //切换按钮
  5.         <li class="tab-nav-item"><a href="javascript:;"><span>已使用</span></a></li>
  6.         <li class="tab-nav-item"><a href="javascript:;"><span>已过期</span></a></li>
  7.     </ul>
  8.     //优惠券组
  9.     <div class="tab-panel-item tab-panel-item-clear">
  10.         <a href="javascript:;" class="jq22-flex">
  11.             <div class="jq22-price-nub">
  12.                 <div class="jq22-digit">
  13.                     <h2><em>￥</em>10</h2>
  14.                 </div>
  15.                 <div class="jq22-full">
  16.                     <p>
  17.                         满1000元可用
  18.                     </p>
  19.                 </div>
  20.             </div>
  21.             <div class="jq22-flex-box">
  22.                 <h2>新用户专享红包-购物优惠券</h2>
  23.                 <h3>2019.09.03~2019.09.29</h3>
  24.                 <button>已使用</button>
  25.             </div>
  26.         </a>
  27.     </div>
  28. </div>

需要调用tab.js

  1. Tab.DEFAULTS = {
  2.     nav: '.tab-nav-item',
  3.     panel: '.tab-panel-item',
  4.     activeClass: 'tab-active'
  5. };
  7. Tab.prototype.bindEvent = function() {
  8.     var _this = this;
  9.     _this.$nav.each(function(e) {
  10.         $(this).on('click.ydui.tab', function() {
  11.             _this.open(e);
  12.         });
  13.     });
  14. };
  16. function Plugin(option) {
  17.     var args = Array.prototype.slice.call(arguments, 1);
  18.     return this.each(function() {
  19.         var target = this,
  20.             $this = $(target),
  21.             tab = $this.data('ydui.tab');
  22.         if (!tab) {
  23.             $this.data('ydui.tab', (tab = new Tab(target, option)));
  24.         }
  25.         if (typeof option == 'string') {
  26.             tab[option] && tab[option].apply(tab, args);
  27.         }
  28.     });
  29. }
  30. $(window).on('load.ydui.tab', function() {
  31.     $('[data-ydui-tab]').each(function() {
  32.         var $this = $(this);
  33.         $this.tab(window.YDUI.util.parseOptions($this.data('ydui-tab')));
  34.     });
  35. });
  36. $.fn.tab = Plugin;

特别说明

html页面引用tab.js 外框div里面需要有data-ydui-tab