1. 14.05.23 HTML5 jQueryビギナーズ
jQuery UI Tabs で効率よくタブ機能を実現しよう！
Ticklecode.
Yoshinori Kobayashi

2. 小林由憲（こばやしよしのり）
Twitter: @AsbyuKobayashi
ブログ: In Advance Only
生まれは 奈良県 です。
2

3. 3
新聞社 編集部 Webクリエイティブチーム 所属
個人でも
Webサイト制作の受託
ブログ、自社サイト制作運営

4. 4
Webサイトで使用頻度の高い タブ
jQueryで自前で制作してもよいが・・・
CSSやタブの切り替えの動き、なおかつレスポンシブを
考えると結構、面倒・・・。

5. 5
制作を便利にしてくれるツール
http://jquerytools.org/documentation/tabs/index.html
jQuery TOOLS TABS
http://getbootstrap.com/javascript/#tabs
Twitter Bootstrap Tab.js
http://jqueryui.com/tabs/
jQuery UI TABS

6. 6
今回のデザインパーツ
jQuery UI TABS で制作
http://www.ticklecode.com/present/140523_HTML5_jQuery_UI_TABS
・ボタンとタブの連携。
・レスポンシブでも使える。
・設定が簡単。

7. 7
Point1. 近いテーマを選んで、CSSを追加修正
完全にデザインに一致するカスタマイズは
できないので、別途CSSで調整が必要。
http://jqueryui.com/themeroller/

8. 8
Point2. tabs() メッソドで、タブを描画
HTML
<div id="tabs-A">
<ul>
<li><a href="#tabs-A1">エジプト</a></li>
<li><a href="#tabs-A2">トルコ</a></li>
：
</div>
<div id="tabs-A1">
<blockquote>エジプト・アラブ共和国（エジプト・アラ
ブきょうわこく）、
JavaScript
<script src=“js/jquery-ui-・・・
$(function() {
// タブ機能を有効にする
$("#tabs-A").tabs();
：

9. 9
Point3. ボタンで指定したタブをアクティブにする。
// Aグループの3つ目のタブをアクティブ
$( "#tabs-A" ).tabs("option","active",2);
タブをアクティブにするには、option でactive を指定！

10. 10
まとめ
・jQuery UI TABS が簡単で、扱いやすい。
・デザインは、別途CSSを追加修正してあげる。
・コードで使うメソッドは、tabs() のみ。
アクティブにする場合は、tabs(“option”,“active”,数値);