moo.fxで2段組みのタブ切り替えメニューを作る
4 / 15 / 2008
前回はmoo.fxを使った普通のタブ切り替えメニューを紹介しましたが、今回は2段組みタイプです。
http://www.nyokiglitter.com/tutorials/2columns.html
まずはここからダウンロード。中身を適当な場所に置き<head></head>内にリンクを記述します。CSSはHTMLの中に書かれているので、必要に応じて外部化してください。
<script type=”text/javascript” src=”scripts/prototype.lite.js”></script>
<script type=”text/javascript” src=”scripts/moo.fx.js”></script>
<script type=”text/javascript” src=”scripts/moo.fx.pack.js”></script>
<script type=”text/javascript”>
//the main function, call to the effect object
/*
function init(){
var stretchers = document.getElementsByClassName(’stretcher’); //div that stretches
var toggles = document.getElementsByClassName(‘tab’); //h3s where I click on
//accordion effect
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 400, transition: fx.sineInOut}
);
//hash functions
var found = true; // if true, accordion starts closed on load else if false first one starts open on load
toggles.each(function(h3, i){
var div = Element.find(h3, ‘nextSibling’); //element.find is located in prototype.lite
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
*/
function init()
var stretchers = document.getElementsByClassName(’stretcher’); //div that stretches
var toggles = document.getElementsByClassName(‘tab’); //h3s where I click on
//accordion effect
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: true, height: true, duration: 400}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, ‘nextSibling’); //element.find is located in prototype.lite
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
この/**/でコメントアウトされてる前半部分と、されてない後半部分があるんですが、違いがよく分からない…二つの設定からどちらかを選べるってことでしょう。コメントアウト部分は消してもよい。初期設定では
.tabの中にあるh3タグで囲まれている部分をクリックすると#contentの中の.stretcher部分が開く
って感じです。もちろん変更可能。
var stretchers = document.getElementsByClassName(’stretcher’); //div that stretches
var toggles = document.getElementsByClassName(‘tab’); //h3s where I click on
このへんと
if (window.location.href.indexOf(h3.title) > 0) {
このへんですね。
toggles, stretchers, {opacity: true, height: true, duration: 400}
opacityは切り替え時に透明の演出をするかどうか。durationは切り替えの速度です。
</body>の直前に
<script type=”text/javascript”>
Element.cleanWhitespace(‘content’);
init();
</script>
と書きます。HTMLは
<div id=”left”>
<div class=”tab”>
<h3 title=”first”><a href=”javascript:;”>first</a></h3>
</div>
<div class=”tab”>
<h3 title=”first”><a href=”javascript:;”>first</a></h3>
</div>
<div class=”tab”>
<h3 title=”first”><a href=”javascript:;”>first</a></h3>
</div><br />
</div>
<div id=”right”>
<div id=”content”>
<div class=”stretcher”>
<h3>First</h3>
</div>
<div class=”stretcher”>
<h3>Second</h3>
</div>
<div class=”stretcher”>
<h3>third</h3>
</div>
</div>
</div>
みたいになります。ここで謎な部分が一つ。なぜか<br />を消すと作動しなくなる。これで数時間悩んだ。なぜだろう。
コメントする