• tab切换


    说明:

      

    html 部分:

      <div>
          <ul class="tab-nav-box tp-tab tp-tab01" data-content=".tab-content-box-3">
              <a class="tab-item active" href="javascript:void(0)">tab1</a>
              <a class="tab-item" href="javascript:void(0)">tab2</a>
              <a class="tab-item" href="javascript:void(0)">tab3</a>
          </ul>
            <div class="tab-box tab-content-box-1">
              <div class="content-item active">content tab1</div>
              <div class="content-item">content tab2</div>
              <div class="content-item">content tab3</div>
            </div>
        </div>

    js 部分/*

     * @name        tab.js tab切换功能
    
     */
     define(function(require, exports, module) {
         // 通过 require 引入依赖
         // var bind = require('../common/bind.js');
        //找到页面上data-role =tab元素
        var Tab = function(ele,config){
            this.cfg = $.extend({
               trigger:'touchend',
               index:0, // 默认选中的索引项
               content: '.tab-content-box'
            }, config);
            this.init(ele);
        };
        Tab.prototype = {
            constructor:Tab,
            init: function(ele){
              var self = this;
              this.$ele = ele;
    
              this.$content = $(self.$ele.data("content") || self.cfg.content);
              this.renderTab();
              this.event();
            },
            renderTab:function(){
              var self = this;
              this.$ele.children().eq(self.cfg.index).addClass('active');
              this.$content.children().eq(self.cfg.index).addClass('active');
            },
            event:function(){
              var self = this;
              self.$ele.on(self.cfg.trigger, '.tab-item', function(){
    
                var _this = $(this);
                if(_this.hasClass('active')) return;
                _this.addClass('active').siblings().removeClass('active');
                self.$content.children().removeClass('active').eq(_this.index()).addClass('active');
              })
            }
        }
        $.extend($.fn,{
            tab:function(config){
                return new Tab($(this), config || {});
            }
        });
        module.exports = $;
     })
  • 相关阅读:
    FIREDAC(DELPHI10 or 10.1)提交数据给ORACLE数据库的一个不是BUG的BUG
    分布式系统的软肋——数据一致性
    原子操作
    Android---观察者模式的简单实现demo
    Android -- 获取网络数据并将数据存到本地数据库中
    加密模式
    Vue.js——vue-resource全攻略
    VUE---Missing space before function parentheses
    css:子元素div 上下左右居中方法总结
    扒取网站的源代码
  • 原文地址:https://www.cnblogs.com/restart77/p/12336977.html
走看看 - 开发者的网上家园