正直、まだまだきちんと理解できていない部分が多いけど、とりあえず出来たことだけでもメモ。
まず、jQuery UIのダウンロードは、
で、ただダウンロードするだけではなく、Themesなるものが指定できるらしい。ここで、好きな色とかパターンを選択する。
で、いざダウンロードすると、指定した色やパターンのcssと、imgが、jQuery UIと一緒にくっついてダウンロードされるっぽい。
で、ダウンロードされたzipファイルを解凍すると、やたらとファイルが多くて、どれがどれだかよくわからなかった(笑)
とりあえず、色々調べてみて、色々試してみたところ。
development-bundle/ui の中のjsファイルと、
development-bundle/themes/custom-theme の中のcssファイルを使うとよさそう。
各々のフォルダにある、jquery-ui-1.7.2.custom.js、とjquery-ui-1.7.2.custom.cssを使うっぽい。
後は、同じフォルダの中にある使いたいUI用のファイル？(ui.tabs.jsとか、ui.tabs.cssとか)を一緒に読み込めば良いっぽい。多分、このファイルは使いたい機能によって、読み込むべきファイルが違うんだと思う。「タブ」なら「ui.tabs.js」で、「アコーディオン」なら「ui.accordion.js」。
さらに、scriptタグで、使いたいUIの実行を記述すると良い。
html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>タブテスト</title>
<script type=”text/javascript” src=”path/to/jquery.js”></script>
<script type=”text/javascript” src=”path/to/jquery-ui-1.7.2.custom.js“></script>
<script type=”text/javascript” src=”path/to/ui.tabs.js“></script>
<link rel=”stylesheet” type=”text/css” href=”path/to/jquery-ui-1.7.2.custom.css” />
<link rel=”stylesheet” type=”text/css” href=”path/to/ui.tabs.css” />
<script type=”text/javascript”>
$(function(){
$(“#tab-container”).tabs();
});
</script>
</head>
<body>
<div id=”tab-container”>
<ul>
<li><a href=”#fragment-1″><span>タブ-1 </span></a></li>
<li><a href=”#fragment-2″><span>タブ-2 </span></a></li>
<li><a href=”#fragment-3″><span>タブ-3 </span></a></li>
</ul>
<div id=”fragment-1″>
タブ1の内容
</div>
<div id=”fragment-2″>
タブ2の内容
</div>
<div id=”fragment-3″>
タブ3の内容
</div>
</div>
</body>
</html>
上記のように記述すれば、とりあえず動きました…
因みに、
$(“#tab-container”).tabs({fx:{opacity:’toggle’,duration:’500′}});
こんな感じで、tabs()の中にオプションが指定できます。上記の場合、タブの中を切り替える時にfadeします。
いやいや、ｊQuery UIは、まだまだ勉強不足です。もうちょっと勉強しないと、はっきりと解らない事が多すぎですな……
まあ、とりあえず動いたからよかった。
因みに、このサイトの説明はわかりやすかったです。
