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

Tweet

Category JavaScript / Tagged jQuery 2012/05/02

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

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

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

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">タブ１</a></li>
		<li><a href="#tabs-2">タブ２</a></li>
		<li><a href="#tabs-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のタブにする – デモ