tabs
data-role=”tabs”はタブパネルを作成するための属性です。
data-role=”tabs”を指定した要素内にul要素、li要素でマークアップしたナビゲーションを配置し、ナビゲーションにより表示するタブを切り替えることができます。
<div data-role="tabs">
<div data-role="navbar">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li><a href="#fragment-3">Three</a></li>
</ul>
</div>
<div id="fragment-1">
<p>This is the content of the tab 'One', with the id fragment-1.</p>
</div>
<div id="fragment-2">
<p>This is the content of the tab 'Two', with the id fragment-2.</p>
</div>
<div id="fragment-3">
<p>This is the content of the tab 'Three', with the id fragment-3.</p>
</div>
</div>サンプルでは、data-role=”navbar”を指定しナビゲーションの装飾を行っています。
data-role=”tabs”で作成されたタブパネルはjQuery UIのタブパネルと同じのイベントやメソッドを有します。
jQuery Mobile 1.4.0での追加/変更data-role="tabs"はjQuery Mobile 1.4で追加された属性です。
参考URL
Tabs Widget | jQuery Mobile API Documentation
登録日 : 2014年01月27日 最終更新日 : 2016年12月19日