Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

  • Identifiez-vous pour voir les commentaires

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”,数値);

×