Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery Mobile逆引きリファレンス

jQuery Mobile逆引きリファレンス

Tabsウィジェットでタブパネルを作成するには?

2014年3月13日

パネルの端に配置されたタブをクリックするとパネル内容が切り替わるUIを、jQuery MobileのTabsウィジェットで手軽に作成する方法を解説。

  • このエントリーをはてなブックマークに追加

jQuery Mobileとは?

 jQuery Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス: jQuery Mobileを利用するには?」を参照してください。

 jQuery Mobileでタブパネルを利用するには、Tabsウィジェットを利用します。タブパネルとは、パネルの端(基本的に上端)に配置されたタブをクリックすることで(もしくはマウスポインターを当てることで)パネルの内容を切り替えられる、定型的なUIの1つです。

Tabsウィジェットの基本

 例えば以下は、[Backbone.js]/[Knockout.js]/[AngularJS]という3つのタブを持つ、基本的なタブパネルのコード例(と、その実行結果の画面)です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
  href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js">
</script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>jQuery Mobile TIPS</h1>
  </div>
  <div role="main" class="ui-content">
    <!--3タブパネル全体を定義-->
    <div id="tabs" data-role="tabs">
      <!--2タブリストを準備-->
      <div data-role="navbar">
        <ul>
          <li><a href="#backbone" class="ui-btn-active">Backbone.js</a></li>
          <li><a href="#knockout">Knockout.js</a></li>
          <li><a href="#angular">AngularJs</a></li>
        </ul>
      </div>
      <!--1パネル(コンテンツ領域)を準備-->
      <div id="backbone" class="ui-body ui-body-a">
        <p>Backbone.jsは...</p>
      </div>
      <div id="knockout" class="ui-body ui-body-a">
        <p>Knockoutは...</p>
      </div>
      <div id="angular" class="ui-body ui-body-a">
        <p>Angular.jsは...</p>
      </div>
    </div>
  </div>
  <div data-role="footer">
    <h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
  </div>
</div>
</body>
</html>
基本的なタブパネルを表示するコード(tabs.html)
[Knockout.js]タブをタップ

[Knockout.js]タブをタップ

タブをクリックすると、コンテンツが切り替わる

 まず、パネル(=コンテンツ領域)は<div>要素で表します(1)。コンテンツ領域であることが分かるように、class属性には「ui-body」と、テーマ(ここでは「ui-body-a」なので、スウォッチ「a」)を指定しておきます。あとからコンテンツを識別できるように、id属性は必須です。

 続いて、タブ部分を表すにはNavbarウィジェットを利用します(Navbarウィジェットについては、別稿「Navbarウィジェットでナビゲーションバーを作成するには?」を参照(2))。この際、リンク先として、対応するパネル(=<div>要素)のid値を「#id」の形式で指定します。なお、現時点では、アクティブなタブに自動でスタイルが適用されませんので、アクティブなタブには、手動で「class="ui-btn-active"」属性を付与しています(ここでは[Backbone.js]タブ)。

 最後に、タブとパネル全体を、<div data-role="tabs">要素でくくって出来上がりです(3)。

[Note]利用可能なパラメーター

 現時点でのjQuery MobileのTabsウィジェットは、jQuery UIの同名のウィジェットをそのままインポートしたものです。よって、パラメーターもほぼ同じものを「data-xxxxx」の形式で指定できます。「ほぼ」とはパラメーターによっては、正しく動作しないものがあるようです。筆者の環境では、「data-active」「data-collapsible」「data-event」などのパラメーターの動作を確認しています。これらパラメーターについては、別稿「Tabsウィジェットでタブパネルを作成するには?」を参照してください。

パネル領域を別ファイルにする

 パネル領域を外部ファイルに分離することもできます。もっとも、これには特別な手順は不要で、パネル要素を別ファイルに切り出した上で、タブからのリンクを「#id」ではなく、ファイル名にするだけです。

 以下のコードで、分離前と同じ結果を得られることを確認してください。

HTML
<div id="tabs" data-role="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="backbone.html" class="ui-btn-active"
        data-ajax="false">Backbone.js</a></li>
      <li><a href="knockout.html" data-ajax="false">Knockout.js</a></li>
      <li><a href="angular.html" data-ajax="false">AngularJs</a></li>
    </ul>
  </div>
</div>
パネル領域を外部化した場合のタブパネルの記述例(tab_ajax.html)
HTML
<div id="knockout" class="ui-body ui-body-a">
  <p>Knockout は...</p>
</div>
別ファイルに分離したパネル領域(knockout.html)

backbone.html、angular.htmlも同じなので、省略しています。

※以下では、本稿の前後を合わせて5回分(第8回~第12回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery Mobile逆引きリファレンス
8. jQuery Mobileページでアイコン付きのボタンを配置するには?

jQuery Mobileページでボタンを設置する方法について説明。今回は、アイコン付きのボタンをレイアウトする方法を解説する。

jQuery Mobile逆引きリファレンス
9. Navbarウィジェットでナビゲーションバーを作成するには?

アプリ共通のリンクやコマンドボタンなどを配置するために使われるナビゲーションバーを、jQuery MobileのNavbarウィジェットで手軽に作成する方法を解説する。

jQuery Mobile逆引きリファレンス
10. 【現在、表示中】≫ Tabsウィジェットでタブパネルを作成するには?

パネルの端に配置されたタブをクリックするとパネル内容が切り替わるUIを、jQuery MobileのTabsウィジェットで手軽に作成する方法を解説。

jQuery Mobile逆引きリファレンス
11. Panelウィジェットで左右からスライド表示するには?

左右からスライド表示するパネルを、jQuery MobileのPanelウィジェットで手軽に作成する方法を解説する。

jQuery Mobile逆引きリファレンス
12. Popupウィジェットでポップアップを表示するには?

ツールヒント/ダイアログ/ポップアップメニューなどのポップアップを、jQuery MobileのPopupウィジェットで手軽に作成する方法を解説する。

サイトからのお知らせ

Twitterでつぶやこう!