jQuery-UIでタブメニューを作成する手順まとめ

タブメニューはオシャレで機能的なUIを作るのに便利ですよね。

ただ自力で作成するのは現実的ではないのでjQuery-UIを使うのが一番楽だと思います。

という訳でjQuery-UIを使って切り替えできるタブメニューを作る手順を詳解

タブメニューの作る手順

jQuery-UIでタブメニューを作るのはすごく簡単です。

必要なのは次の手順だけ

  1. 必要なCSS・JSの読み込み
  2. タブメニュー用HTMLの作成
  3. tabs関数でタブメニュー作成

ということでこの3つについてコード例を一緒にやり方を説明していきます。

必要なCSS・JSの読み込み

まず最初にやらなきゃいけないのはjQuery本体とjQuery-UIのCSSとかJSファイルの読み込み

つまり次の3つのファイルが必要ということ

  • jquery.min.js
  • jquery-ui.min.js
  • jquery-ui.min.css

この3つだけは最低限必要なので読み込んでおきましょう。

 

CDN経由で読み込むならヘッダーに次のように書いておけばOK

バージョンについてはなるべく最新のものを使った方が良いです。

タブメニュー用HTMLの作成

では次にタブメニュー用のHTMLを作成していきましょう。

タブメニュを作る際に必要なHTML構成は次の通り

  • タブ全体(div要素)
    • タブメニュー(ul要素)
    • タブコンテンツ1(div要素)
    • タブコンテンツ2(div要素)
    • 以下略・・・

まずタブ全体をdiv要素で囲んで、コンテンツを切り替えするタブをul要素内にli要素として作ります。

そしてそれぞれのタブがクリックされたときに開くコンテンツをその下にdiv要素で複数作成

このような構造にする必要があります。

 

言葉だと分かりにくいので実際にHTML例を見せると次のような感じ

タブ全体を囲んでいるdiv要素には後で使うので必ず "tabs" などのIDを振ってください。

そして上のコードのようにul要素の中の1つ1つのli要素で囲まれたリンクがタブになります。

そしてそのリンク先にはリンクがクリックされたときに開きたいdiv要素のIDを指定してください。

例えば上の例なら タブによって開かれるdiv要素のIDは "tab_content_1" と "tab_content_2" の2つです。

ul要素内のリンクのhref属性にそのIDを指定することでタブとコンテンツが結び付けられます。

tabs関数でタブメニュー作成

では最後にjQuery-UIのtab関数でタブメニューを作成しましょう。

これは文字通り指定した要素をタブメニューに変換する関数です。

 

やり方は次のようにタブ全体を囲むdiv要素に対してtabs関数を実行するだけ

この例では先ほどのHTML例の "tabs" というIDを持つdiv要素に対してタブメニュー化しています。

 

以上でタブメニューの完成です。

タブメニューの見本

実際にどのようなタブメニューになるかは次のCodePenを見てください。

See the Pen 【jQuery】タブウィジェットの使い方 by ぴー助 (@pisuke-code) on CodePen.

タブをクリックするとそれに結びつけられたdiv要素の内容が表示されます。

ここまでのまとめ

ということでタブメニューの作り方をもう一度まとめると次の通り

  1. 必要なCSS・JSの読み込み
  2. タブメニュー用HTMLの作成
  3. tabs関数でタブメニュー作成

基本的には難しくないですがタブメニュー用HTMLは構造を間違えると上手くタブ化できません。

またタブ用のリンクと表示するdiv要素が結び付けられているかも間違えないように注意です。

 

以上jQuery-UIで簡単にできるタブメニューの作成方法をまとめました。

ではでは($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください