moo.fxを使ってタブとか色々なメニューを作る
4 / 11 / 2008
moo.fxというAjaxライブラリを使ってタブ切り替えとかアコーディオンとか色々なメニューを設置する手順とサンプルです。
http://www.nyokiglitter.com/tutorials/tabs.html
からダウンロードする。
ダウンロードしたファイルを適当な場所に置きましょう。<head></head>内に
<script type=”text/javascript” src=”パス/prototype.lite.js”></script>
<script type=”text/javascript” src=”パス/moo.fx.js”></script>
<script type=”text/javascript” src=”パス/moo.fx.pack.js”></script>
と書く。 CSSはサンプルで付いてくるtabbed.htmlの中に書かれているので、必要に応じて外部化するとか、なんとかしてください。それでもって、tabbed.htmlに書いてある
<script type=”text/javascript”>
function init(){
var stretchers = document.getElementsByClassName(‘box’);
var toggles = document.getElementsByClassName(‘tab’);
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, ‘nextSibling’);
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
この部分 も外部化したければ出来るはず。ここに書いてある
var stretchers = document.getElementsByClassName(‘box’);
var toggles = document.getElementsByClassName(‘tab’);
このへんがCSSのClass名に対応する。
toggles, stretchers, {opacity: false, height: true, duration: 600}
このへんが動き方の設定になる。durationは値が大きいほど遅く動きます。
if (window.location.href.indexOf(h3.title) > 0) {
このへんがHTMLタグの設定になる。デフォルトはh3になってます。必要に応じて変更。HTMLは
<div id=”content”>
<h3 class=”tab”><div class=”tabtxt”><a href=”#”>1つ目</a></div></h3>
<h3 class=”tab”><div class=”tabtxt”><a href=”#”>2つ目</a></div></h3>
<h3 class=”tab”><div class=”tabtxt”><a href=”#”>3つ目</a></div></h3>
<div class=”boxholder”>
<div class=”box”><p>1つ目</p></div>
<div class=”box”><p>2つ目</p></div>
<div class=”box”><p>3つ目</p></div>
</div>
</div>
みたいな感じになる。（なんかtabbed.htmlのソースがややおかしいので、少し変えてあります）
開くコンテンツのクラス名はすべて<div class=”box”>なので、タブの順番と同じように書かないとダメっす。まぁあたりまえか。それで</body>の直前に
<script type=”text/javascript”>
Element.cleanWhitespace(‘content’);
init();
</script>
と書く。contentはid名。変更可能。
ちなみにlightbox JSと併用する場合はmoo.fx.jsのリンクををlightbox.jsより先に<head></head>内に記述しましょう。じゃないとlightboxが作動しなかった（少なくとも僕の環境では）
この他にも横にスライドするメニューと、2段組みのメニューがあります。個人的には 2段組みのメニューが気に入った！けど、謎な部分で設置に大変苦労したので、次回にでも書こうかな。