tab Accordion

tabAccordion

今回紹介するのは、新しいものじゃないんですが、タブ付きのアコーディオンajaxです。

タブをクリックするとそのタブの内容に切り替わるというものです。
ダウンロード&サンプルページ

セッティングの方法ですが、ファイルをダウンロード後、jsファイルをサーバーにアップロード。以下を<head>内に記入(jsファイルのアドレスは、アップロードしたアドレスに適宜変更して下さい。)

<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”>
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>

続いて</body>の前に以下を記入

<script type=”text/javascript”>
Element.cleanWhitespace(‘content’);
init();
</script>

続いてスタイルシートに以下を追加します。

.box{
background: #fff;
}
.boxholder{
clear: both;
padding: 5px;
background: #8DC70A;
border: 1px solid #8DC70A;
}
.tab{
float: left;
height: 32px;
width: 102px;
margin: 0 1px 0 0;
text-align: center;
background: #8DC70A url(images/greentab.jpg) no-repeat;
}
.tabtxt{
margin: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 9px 0 0 0;
}

後は、このajaxを表示させたいところに以下を記入して下さい。(以下は、タブが1個の場合。タブを増やす場合は以下を追加で記入)

<div class=”tab”><h3 class=”tabtxt” title=”first”><a href=”javascript:;”>first</a></h3></div>
<div class=”box”>
<p><strong>The First Box</strong>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tempus ante nec ipsum. In ut felis id leo aliquet euismod. In augue lorem, posuere eu, tincidunt non, bibendum quis, nisl. Integer erat erat, posuere vel, convallis feugiat, accumsan ac, sem. Sed scelerisque tortor nec leo. Etiam vel massa vitae nulla elementum aliquet. Donec egestas semper tellus. Donec ultrices ante cursus lacus. Integer nec est. Suspendisse potenti. Donec fringilla. Maecenas condimentum, arcu sit amet volutpat tincidunt, mi urna sodales nunc, eget porttitor odio lectus sit amet metus. Vivamus aliquam. Etiam lectus leo, venenatis sit amet, vestibulum eu, sollicitudin vitae, metus.</p>
</div>

このajaxは、h3タグとクラスネームの”tab”がトリガーになってます。
hタグがh3だと都合が悪くて書き換える時は、<script>内のh3も書き換えないと、動きません。
結構、オシャレな感じなのでお試しあれ。

10月 17th, 2008 at Posted  tags: 

Leave a comment

Categories

Sponsor Links

Facebook Page




Archives

Comments

写真素材フォトリア