jQuery UIのtabsを実装する最低限要素

とーっても便利なjQueryの、すごーくクールなjQueryUIのtabsを実装するための最低限要素をご紹介。
（jQueryUIから必要なファイルだけ落とそうとしても、いろいろおまけしてくれる。）
必要なファイルはダウンロードページで、「UI core」と「Tabs」にチェックをつけて「Download」。たくさんファイルがあるが、必要なのは、下記の4ファイルだけ。

┳development-bundle
┃┣themes
┃┃┗base
┃┃　┗ui.tabs.css
┃┃
┃┃
┃┗ui
┃　┣ui.core.js
┃　┗ui.tabs.js
┃
┗js
　┗jquery-1.3.2.min.js

htmlのheadタグ内には、


<link rel="stylesheet" href="./ui.tabs.css" type="text/css" />
<script language="javascript" type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="./ui.core.js"></script>
<script language="javascript" type="text/javascript" src="./ui.tabs.js"></script>
<script language="javascript">
<!--
$(function() {
$("#tabs").tabs();
});
//-->
</script>


を追加。bodyタグ内に


<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">内容1</div>
<div id="tabs-2">内容2</div>
<div id="tabs-3">内容3</div>
</div>


で、動作します。後のデザインはご自由に。

posted: 2009年12月月7日（月曜日） 14:36
category: memo, web-dev
ご感想をどうぞ
trackbackURL:http://www.hrkd.net/2009/12/07/id_596/trackback