企業情報 │ お問い合わせ │サポート
[ AJAXでタブの内容をローディング ] [ メニュー ] [ タブのスライドショープラグインブ]

履歴をサポートするAJAXedタブ

これらのタブは、履歴プラグインとAJAX効果のパワーを兼ね備えています。このように、ウェブサイトのグローバルナビゲーションを 構築することができることに注意してください。それはまた、全くJavaScriptをサポートしないブラウザでも動作します!

HTML コード

履歴機能が動作するように、タブ上でアンカーリンク(#で始まる)を使用します:

<!-- タブ -->
	<ul class="css-tabs">
		<li><a href="ajax1.htm">Tab 1</a></li>
		<li><a href="ajax2.htm">Second tab</a></li>
		<li><a href="ajax3.htm">An ultra long third tab</a></li>
	</ul>
</head>

<body>

<!-- 単一のペイン -->
<div class="css-panes">
	<div style="display:block"></div>
</div>

JavaScript コード

ajax effectで、history プラグインを使用します:

	$("ul.css-tabs").tabs("div.css-panes > div", {effect: 'ajax', history: true});

このデモのスタンドアロン版を見てください。ページに掲載するためには、ソースコードを見てください。

Copyright(c)2005 Your site name All rights reserved. テンプレートby LinkFly