タブメニューはオシャレで機能的なUIを作るのに便利ですよね。
ただ自力で作成するのは現実的ではないのでjQuery-UIを使うのが一番楽だと思います。
という訳でjQuery-UIを使って切り替えできるタブメニューを作る手順を詳解
タブメニューの作る手順
jQuery-UIでタブメニューを作るのはすごく簡単です。
必要なのは次の手順だけ
- 必要なCSS・JSの読み込み
- タブメニュー用HTMLの作成
- tabs関数でタブメニュー作成
ということでこの３つについてコード例を一緒にやり方を説明していきます。
必要なCSS・JSの読み込み
まず最初にやらなきゃいけないのはjQuery本体とjQuery-UIのCSSとかJSファイルの読み込み
つまり次の３つのファイルが必要ということ
- jquery.min.js
- jquery-ui.min.js
- jquery-ui.min.css
この３つだけは最低限必要なので読み込んでおきましょう。
CDN経由で読み込むならヘッダーに次のように書いておけばOK
|
1 2 3 4 5 6 |
<!-- jQueryとjQuery-UIの読み込み --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <!-- jQuery UI用のCSSの読み込み --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> |
バージョンについてはなるべく最新のものを使った方が良いです。
タブメニュー用HTMLの作成
では次にタブメニュー用のHTMLを作成していきましょう。
タブメニュを作る際に必要なHTML構成は次の通り
- タブ全体（div要素）
- タブメニュー（ul要素）
- タブコンテンツ１（div要素）
- タブコンテンツ２（div要素）
- 以下略・・・
まずタブ全体をdiv要素で囲んで、コンテンツを切り替えするタブをul要素内にli要素として作ります。
そしてそれぞれのタブがクリックされたときに開くコンテンツをその下にdiv要素で複数作成
このような構造にする必要があります。
言葉だと分かりにくいので実際にHTML例を見せると次のような感じ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="tabs"> <!-- タブメニュー --> <ul> <li> <a href="#tab_content_1">タブ１</a> </li> <li> <a href="#tab_content_2">タブ２</a> </li> </ul> <!-- タブの中身 --> <div id="tab_content_1"> <p>タブ１のコンテンツ</p> </div> <div id="tab_content_2"> <p>タブ２のコンテンツ</p> </div> </div> |
タブ全体を囲んでいるdiv要素には後で使うので必ず "tabs" などのIDを振ってください。
そして上のコードのようにul要素の中の１つ１つのli要素で囲まれたリンクがタブになります。
そしてそのリンク先にはリンクがクリックされたときに開きたいdiv要素のIDを指定してください。
例えば上の例なら タブによって開かれるdiv要素のIDは "tab_content_1" と "tab_content_2" の２つです。
ul要素内のリンクのhref属性にそのIDを指定することでタブとコンテンツが結び付けられます。
tabs関数でタブメニュー作成
では最後にjQuery-UIのtab関数でタブメニューを作成しましょう。
これは文字通り指定した要素をタブメニューに変換する関数です。
やり方は次のようにタブ全体を囲むdiv要素に対してtabs関数を実行するだけ
|
1 2 3 |
$(function(){ $('#tabs').tabs(); }); |
この例では先ほどのHTML例の "tabs" というIDを持つdiv要素に対してタブメニュー化しています。
以上でタブメニューの完成です。
タブメニューの見本
実際にどのようなタブメニューになるかは次のCodePenを見てください。
See the Pen 【jQuery】タブウィジェットの使い方 by ぴー助 (@pisuke-code) on CodePen.
タブをクリックするとそれに結びつけられたdiv要素の内容が表示されます。
ここまでのまとめ
ということでタブメニューの作り方をもう一度まとめると次の通り
- 必要なCSS・JSの読み込み
- タブメニュー用HTMLの作成
- tabs関数でタブメニュー作成
基本的には難しくないですがタブメニュー用HTMLは構造を間違えると上手くタブ化できません。
またタブ用のリンクと表示するdiv要素が結び付けられているかも間違えないように注意です。
以上jQuery-UIで簡単にできるタブメニューの作成方法をまとめました。
ではでは($・・)/~~~
