Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery UI Tabs で効率よくタブ機能を実現しよう! 14.05.23 HTML5 jQueryビギナーズ

2,671 views

Published on

Published in: Technology
  • Be the first to comment

jQuery UI Tabs で効率よくタブ機能を実現しよう! 14.05.23 HTML5 jQueryビギナーズ

  1. 1. 14.05.23 HTML5 jQueryビギナーズ jQuery UI Tabs で効率よくタブ機能を実現しよう! Ticklecode. Yoshinori Kobayashi
  2. 2. 小林由憲(こばやしよしのり) Twitter: @AsbyuKobayashi ブログ: In Advance Only 生まれは 奈良県 です。 2
  3. 3. 3 新聞社 編集部 Webクリエイティブチーム 所属 個人でも Webサイト制作の受託 ブログ、自社サイト制作運営
  4. 4. 4 Webサイトで使用頻度の高い タブ jQueryで自前で制作してもよいが・・・ CSSやタブの切り替えの動き、なおかつレスポンシブを 考えると結構、面倒・・・。
  5. 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. 6 今回のデザインパーツ jQuery UI TABS で制作 http://www.ticklecode.com/present/140523_HTML5_jQuery_UI_TABS ・ボタンとタブの連携。 ・レスポンシブでも使える。 ・設定が簡単。
  7. 7. 7 Point1. 近いテーマを選んで、CSSを追加修正 完全にデザインに一致するカスタマイズは できないので、別途CSSで調整が必要。 http://jqueryui.com/themeroller/
  8. 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. 9 Point3. ボタンで指定したタブをアクティブにする。 // Aグループの3つ目のタブをアクティブ $( "#tabs-A" ).tabs("option","active",2); タブをアクティブにするには、option でactive を指定!
  10. 10. 10 まとめ ・jQuery UI TABS が簡単で、扱いやすい。 ・デザインは、別途CSSを追加修正してあげる。 ・コードで使うメソッドは、tabs() のみ。 アクティブにする場合は、tabs(“option”,“active”,数値);

×