[Toolkit – Titon]Accordionのサンプル

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]です。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)