ToolKit[Titon]を利用した
Accordionのサンプルプログラムです。
ToolKit[Titon]については
下記サイトを参照してください。
参照URL①:Toolkit – Project Titon
参照URL②:Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」:phpspot開発日誌
デモサイト:Accordion – Titon Toolkit Demo Site
HTML head部
<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/toolkit.css" /> <link rel="stylesheet" type="text/css" href="css/ui.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="./js/toolkit.js"></script> </head>
HTML body部(サンプル①)
<ul class="accordion" data-accordion> <li> <header class="accordion-header" data-accordion-header> Accordion① </header> <section class="accordion-section" data-accordion-section> <article class="accordion-body"> アコーディオン①のサンプルです。<br /> アコーディオン①のサンプルです。<br /> アコーディオン①のサンプルです。<br /> アコーディオン①のサンプルです。 </article> </section> </li> <li> <header class="accordion-header" data-accordion-header> Accordion② </header> <section class="accordion-section" data-accordion-section> <article class="accordion-body"> アコーディオン②のサンプルです。<br /> アコーディオン②のサンプルです。<br /> アコーディオン②のサンプルです。<br /> アコーディオン②のサンプルです。 </article> </section> </li> </ul>
JavaScript部
<script> $( document ).ready( function() { # No.01 $( "[data-accordion]" ).accordion(); }); </script>
解説
Accordionの機能を使う場合は
[jQuery]とファイル[toolkit.js]が
必要になりますので[head]部で読み込みます。
また、Accordionのデフォルトデザインが
記載されている[ui.css]も読み込んでいます。
# No.01
アコーディオン化するターゲットに対して
関数[accordion]を実行させます。
アコーディオン化するターゲットは
属性[data-accordion]で設定してあります。
※ToolKit[Titon]のライセンスは[BSD]です。