SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【jQuery】リストをページ分けしてjqueryuiのタブにする

ある長いリストがあるとき、そのHTMLのプレーンなリスト(ulとliのリスト)を、スクリプトで変形し、1-10、11-20…のように区切って、jqueryuiのtabsを適用し、縦に短くし、タブ切り替えで閲覧できるようにします。

tabs

jqueryui.tabsをするためには、通常以下のようなHTMLを用意します。

<script>
	$(function() {
		$( "#tabs" ).tabs();
	});
</script>

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">タブ1</a></li>
		<li><a href="#tabs-2">タブ2</a></li>
		<li><a href="#tabs-3">タブ3</a></li>
	</ul>
	<div id="tabs-1">
		<ul>
			<li>データ 1</li>
			~ データ 1から10 ~
			<li>データ 10</li>
		</ul>
	</div>
	<div id="tabs-2">
		<ul>
			<li>データ 11</li>
			~ データ 11から20 ~
			<li>データ 20</li>
		</ul>
	</div>
	<div id="tabs-3">
		<ul>
			<li>データ 21</li>
			~ データ 21から30 ~
			<li>データ 30</li>
		</ul>
	</div>
</div>

ただ、最初から jqueryui.tabs用のHTMLにしなくても、以下のようなプレーンなリストからタブ表示を作ることが可能です。

<ul id="list">
	<li>データ 1</li>
	<li>データ 2</li>
	<li>データ 3</li>
	~ データ 1から30 ~
	<li>データ 30</li>
</ul>

Javascriptが使えない環境では、プレーンなリストが表示され、javascriptが使える環境ではタブ表示になります。情報としてはどちらも同じで、見た目が違うだけとなります。

詳細はデモをご覧ください。

DEMO

リストをページ分けしてjqueryuiのタブにする – デモ

関連するメモ

コメント