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

タブ効果を実現する 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; // チェーン操作}
 })

電話

タブ

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • タブ切り替え効果をJavaScriptで実現(自作ネイティブjs)
  • vue.jsを使用してタブ効果を記述する
  • タブ切り替え効果を実現するVue.jsコンポーネントタブ
  • タブ切り替えを実現するネイティブjs
  • jsはタブ機能コードを実装します
  • Vue.jsコンポーネントタブはタブ切り替えを実装します
  • 垂直タブを実現する js の簡単な方法
  • JS はスライド メニュー効果コードを実装します (タブ、タブ、水平、その他の効果を含む)
  • シンプルなタブ切り替えを実現する 4 つの JavaScript メソッド
  • タブ切り替え効果を実現する js

<<:  MySQL 5.6 から 5.7 にアップグレードする際のマスター スレーブ遅延問題のトラブルシューティング

>>:  Ubuntu 20.04 に GitLab をインストールして設定する方法

推薦する

一般的なブラウザ互換性の問題(概要)

ブラウザの互換性とは、スタイルの互換性 (CSS)、インタラクションの互換性 (JavaScript...

VMware15.5 インストール Ubuntu20.04 グラフィック チュートリアル

1. インストール前の準備1. 公式ウェブサイトからUbuntu 20.04のイメージファイルを直接...

FirefoxでCookieとお気に入りをインポートおよびエクスポートする方法

Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...

Webフロントエンド開発におけるエラーを見つけるための基本的な考え方

WEB開発は主に2つのインタラクション(B/Sデータ)から構成されますブラウザ: 1html、css...

DockerにMinIOをインストールするための詳細な手順

目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...

Centos 6.5 での mysql-community-server. 5.7.18-1.el6 のインストール

次のコマンドを使用して、MySQL Serverがインストールされているかどうかを確認します。 [r...

Vueはページング機能を実装する

この記事の例では、ページング機能を実装するためのVueの具体的なコードを参考までに共有しています。具...

Navicat 経由で MySQL にリモート接続する方法

Navicat を使用して IP 経由で直接接続すると、次のようなさまざまなエラーが報告されます: ...

MySQL外部キーの基本的な機能と使用方法の詳細な説明

この記事では、例を使用して、MySQL 外部キーの基本的な機能と使用方法を説明します。ご参考までに、...

CSS で 3D ブック効果を実装するためのサンプル コード

さっそく、レンダリングを見てみましょうソースコードは以下のとおりです <!DOCTYPE ht...

Nginx ベースのアクセス制御と接続制限の実装

序文Nginxの組み込みモジュールは、同時リクエスト数の制限とリクエストのソースの制限をサポートして...

Dockerコンテナのディスクがいっぱいになった場合の状況のまとめ

序文この記事では、最近私が遭遇した 2 つの状況について説明します。今後、新たな発見があれば追加して...

Linux サーバーのグラフィック カードのクラッシュの解決策

ログインインターフェースの解像度が特に大きい場合、グラフィカルインターフェース全体が特に大きくなり、...

LinuxサーバにおけるNginxとApacheの共存の実装方法の分析

この記事では、Linux サーバー上で Nginx と Apache の共存を実装する方法について説...