coupons

功能描述

app优惠券页面模板

快速使用

html中将个class 可以作为切换 tab-active	
<div class="jq22-tab" data-ydui-tab>
    <ul class="tab-nav b-line">
        <li class="tab-nav-item tab-active"><a href="javascript:;"><span>未使用</span></a></li> //切换按钮
        <li class="tab-nav-item"><a href="javascript:;"><span>已使用</span></a></li>
        <li class="tab-nav-item"><a href="javascript:;"><span>已过期</span></a></li>
    </ul>
    //优惠券组
    <div class="tab-panel-item tab-panel-item-clear">
        <a href="javascript:;" class="jq22-flex">
            <div class="jq22-price-nub">
                <div class="jq22-digit">
                    <h2><em>￥</em>10</h2>
                </div>
                <div class="jq22-full">
                    <p>
                        满1000元可用
                    </p>
                </div>
            </div>
            <div class="jq22-flex-box">
                <h2>新用户专享红包-购物优惠券</h2>
                <h3>2019.09.03~2019.09.29</h3>
                <button>已使用</button>
            </div>
        </a>
    </div>
</div>

需要调用tab.js 

Tab.DEFAULTS = {
    nav: '.tab-nav-item',
    panel: '.tab-panel-item',
    activeClass: 'tab-active'
};

Tab.prototype.bindEvent = function() {
    var _this = this;
    _this.$nav.each(function(e) {
        $(this).on('click.ydui.tab', function() {
            _this.open(e);
        });
    });
};

function Plugin(option) {
    var args = Array.prototype.slice.call(arguments, 1);
    return this.each(function() {
        var target = this,
            $this = $(target),
            tab = $this.data('ydui.tab');
        if (!tab) {
            $this.data('ydui.tab', (tab = new Tab(target, option)));
        }
        if (typeof option == 'string') {
            tab[option] && tab[option].apply(tab, args);
        }
    });
}
$(window).on('load.ydui.tab', function() {
    $('[data-ydui-tab]').each(function() {
        var $this = $(this);
        $this.tab(window.YDUI.util.parseOptions($this.data('ydui-tab')));
    });
});
$.fn.tab = Plugin;

特别说明

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

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24