GridTabでレスポンシブタブ付きウィジェットを作成する

を使用してWebサイトを構築することは常に簡単です オープンソースツール 車輪を再発明するよりもむしろ。これらのツールはライブラリから小さなプラグインまで多岐にわたりますが、基本的には何でも解決策を見つけることができます。.

驚異的な jQuery GridTabプラグイン 良い例です。それはあなたがすることができます カスタムグリッドを設定する, ブレークポイントを定義する, そして レスポンシブタブ付きウィジェットを作成する どんなウェブサイトにも合う.

独自のCSSクラスを追加したり、既存のクラスを使用してデザインに合ったタブ機能を作成することができます。このプラグインもサポートしています next / prevコントロールのナビゲーション要素 そして タブを切り替える.

インストールは簡単です。 依存関係としてのjQueryライブラリ. インストールしたら、npmからGridTabを入手するか、GitHubから直接ダウンロードします。.

このタブ付きウィジェットプラグインには デフォルトスタイル, だからそれは持っていますか 別のCSSスタイルシート JSプラグインファイルの上に。しかし、このCSSを自分のCSSに統合してHTTPリクエストを減らすことができます。.

プラグインを初期化するには、単に 総グリッドサイズ に加えて 任意のパラメータ （すべてGitHubに掲載）.

これは簡単です 初期化スクリプト：

 $（document）.ready（function（）$（ '＃gridtab-1'）。gridtab（grid：3）;）; 

設定が含まれます カスタムセレクタ, レスポンシブスタイル, ボーダー/パディング/カラー設定, そしてもちろん、 コールバック関数.

これがどのように機能するのか、そしてブラウザでどのように見えるのかを知りたいと思うかもしれません。をチェック “デモ” を見るためのセクション いくつかの例, 含む 生のソースコード あなたはコピーすることができます.

ほとんどの人はタブを小さなプロファイルのウィジェットの機能と考えています。しかしながら, ポートフォリオウェブサイト も利用することができます タブ付きの機能を持つグリッド そしてGridTabプラグインはこの効果を明確にするための最良のリソースです。.

あなたが知る必要があるすべて 完全な文書, GridTabのメインページにあります。これにはGitHubリポジトリへのリンクも含まれているので、ソースを参照して自分のレスポンシブタブ付きグリッドをカスタマイズすることができます。.