タブ効果を実現する js 開発プラグイン

この記事の例では、タブ効果を実現するためのjsプラグインの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

1. ページを作成する

<div class="tab" data-config='{ // タグ内の設定をカスタマイズします "triggerType": "click",
   "効果": "フェード",
   「呼び出す」: 2,
   「自動」: 1000
     }'>
  <ul class="tab-nav">
   <li class="active"><a href="javascript:void(0);" >ニュース</a></li>
   <li><a href="javascript:void(0);" >エンターテイメント</a></li>
   <li><a href="javascript:void(0);" >映画</a></li>
   <li><a href="javascript:void(0);" >テクノロジー</a></li>
  </ul>
  <div class="content">
   <div class="content-item current">
    <img src="./images/pic1.jpg">
   </div>
   <div class="content-item">
    <img src="./images/pic2.jpg">
   </div>
   <div class="content-item">
    <img src="./images/pic3.jpg">
   </div>
   <div class="content-item">
    <img src="./images/pic4.jpg">
   </div>
  </div>
</div>

2. 基本スタイル

* {
 マージン: 0;
 パディング: 0;
}
ul、li {
 リストスタイル: なし;
}
体 {
 背景: #323232;
 フォントサイズ: 12px;
 パディング: 100px;
}
.タブ{
 幅: 300ピクセル;
}
.tab .tab-nav {
 高さ: 30px;
}
.tab .tab-nav li {
 表示: インラインブロック;
 右マージン: 5px;
 背景: #767676;
 境界線の半径: 3px 3px 0 0;
}
.tab .tab-nav li a {
 表示: ブロック;
 テキスト装飾: なし;
 高さ: 30px;
 行の高さ: 30px;
 パディング: 0 20px;
 色: #fff;
}
.tab .tab-nav li.active {
 背景: #fff;
 色: #777;
}
.tab .tab-nav li.active a {
 色: #777;
}
.タブ .コンテンツ {
 背景: #fff;
 高さ: 200px;
 パディング: 5px;
}
.タブ .コンテンツ項目 {
 位置: 絶対;
 表示: なし;
}
.tab .content 画像 {
 幅: 290ピクセル;
 高さ: 200px;
}
.タブ .コンテンツ .現在 {
 表示: ブロック;
}

3. 効果

4. タブ開発の思考構造図：オブジェクト、パラメータ、メソッドが必要

5. jsの練習

（関数 （） {
 機能タブ（タブ）
 {
  this.tab = タブ;
  var _this_ = これ;
  // デフォルトの設定パラメータ、属性名は二重引用符で囲みます。そうでない場合、parseJSON エスケープは失敗します。this.config = {
   // マウスのトリガータイプ（クリックまたはマウスオーバー）を定義するために使用されます
   "トリガータイプ": "マウスオーバー",
   // コンテンツ切り替え効果を定義するために使用されます。直接切り替えかフェードインとフェードアウト効果か "effect": "default",
   // 表示するデフォルトのタブ
   「呼び出す」: 1,
   // タブが自動的に切り替わるかどうかを定義し、切り替わるのにかかる時間を指定します "auto": false
  }
  // 設定が存在する場合は、元の設定を拡張し、$.extend とマージします。if (this.getConfig()) {
   this.config を拡張します。
  }
  // マウストリガー関数 var config = this.config; // ストレージ構成、this.config は毎回検索します this.liItem = this.tab.find('.tab-nav li'); // li を取得します
  this.contentItem = this.tab.find('.content div'); // コンテンツを取得します // クリックされたかどうかを判断します。 。操作時にinvokeメソッドを実行して切り替える if (config.triggerType === 'click') {
   this.liItem.click(関数() {
    _this_ を呼び出します($(this));
   });
  } それ以外 {
   this.liItem.mouseover(関数() {
    _this_ を呼び出します($(this));
   });
  }

  // 自動切り替え機能 if (this.config.auto) {
   this.timer = null;
   this.count = 0; // カウンター this.autoplay();
   // マウスが上にあるときに停止し、マウスが離れると続行します this.tab.hover(function () {
    clearInterval(_this_.timer); // これは this.tab です
   }、 関数 （） {
    _this_.autoplay();
   })
  }

  // デフォルトの表示番号 if (this.config.invoke > 1) {
   this.invoke(this.liItem.eq(this.config.invoke - 1)); // 直接スイッチ}
 }

 タブプロトタイプ = {
  // 設定パラメータを取得する getConfig: function () {
   //タブ要素の data-config の内容を取得します。var config = this.tab.attr('data-config');
   if (config && config != '') {
    return $.parseJSON(config); //jsonオブジェクトをjsオブジェクトに変換} else {
    null を返します。
   }
  },
  // 渡されたliを取得して切り替えるinvoke: function (li) {
   var index = li.index(); // li のインデックスを取得します。 var liItem = this.liItem;
   var contentItem = this.contentItem;
   
   li.addClass('active').siblings().removeClass('active'); // アクティブを自身に追加し、他の兄弟を削除します // フェードインとフェードアウトまたはデフォルト var effect = this.config.effect;
   if (効果 === 'デフォルト') {
    contentItem.eq(index).addClass('current').siblings().removeClass('active');
   } それ以外 {
    contentItem.eq(index).fadeIn().siblings().fadeOut();
   }
   // 自動的に切り替える場合はカウントを変更し、そうでない場合は毎回最初から開始します。this.count = index;
  },
  // 自動再生を自動的に切り替える: function () {
   var _this_ = これ;
   var length = this.liItem.length; // 長さを取得 this.timer = setInterval(function() {  
    _this_.count ++; // count に 1 を足すと、これは this.timer になります
    _this_.count >= 長さの場合{
     _this_.count = 0;
    }
    // どの li 項目が event_this_.liItem.eq(_this_.count).trigger(_this_.config.triggerType); をトリガーするか
   }, this.config.auto);
  }
 }

 window.Tab = Tab; // Tab をウィンドウ オブジェクトとして登録します。そうしないと、外部からアクセスできなくなります})();

6. 電話する

// 最初のタブを Tab クラスに渡します var tab = new Tab($('.tab').eq(0));

7. 最適化: 複数のタブがある場合、複数の新しいタブを作成する必要はありません

1. 最初の方法はinit経由です

// init で初期化する Tab.init = function (tabs) {
  タブ.each(関数() {
   新しいタブ($(this));
  });
 }

電話

タブを初期化します($('.tab'));

2. 2番目の方法はjQueryメソッドとして登録することです

// jQueryメソッドとして登録 $.fn.extend({
  タブ: 関数 () {
   this.each(function () { // tabメソッドを呼び出した人 new Tab($(this)); // これは、それぞれ実行されたliです
   });
   return this; // チェーン操作}
 })

電話