Hopes

效果]JS折疊菜單-使用方法 (moo.fx)

效果]JS折疊菜單-使用方法

2006-12-13 12:42 1166人閱讀 評(píng)論(0) 收藏 舉報(bào)

用法:

1.添加JS庫

CODE:
<script src="prototype.lite.js" type="text/javascript"></script>
<script src="moo.fx.js" type="text/javascript"></script>
<script src="moo.fx.pack.js" type="text/javascript"></script>

2.建立xhtml結(jié)構(gòu):

CODE:
<div id="container">
<H1 class="title"><A href="javascript:void(0)">(1)這里放標(biāo)題</H1>
<div class="content">
<p>(1)這里放內(nèi)容</p>
</div>
<H1 class="title"><A href="javascript:void(0)">(2)這里放標(biāo)題</H1>
<div class="content">
<p>(2)這里放內(nèi)容</p>
</div><H1 class="title"><A href="javascript:void(0)">(3)這里放標(biāo)題</H1>
<div class="content">
<p>(3)這里放內(nèi)容</p>
</div>
</div>

3.調(diào)用JS:

CODE:

<script type="text/javascript">
//定義contents 組數(shù)為所有將要顯示的內(nèi)容
var contents = document.getElementsByClassName('content');
//定義contents 組數(shù)為所有標(biāo)題，也是可點(diǎn)擊展開的按鈕
var toggles = document.getElementsByClassName('title');

//調(diào)用moofx JS庫
var myAccordion = new fx.Accordion(
toggles, contents, {opacity: true, duration: 400} //opacity確定是否有alpha透明變化,duration確定動(dòng)作所有時(shí)間
);
myAccordion.showThisHideOpen(contents[0]); //默認(rèn)打開第一個(gè)內(nèi)容
</script>



完成.
簡單而且效果不錯(cuò)吧
如果還要界面好看點(diǎn)，自已定義下CSS吧
注:js文件內(nèi)容參見本人blog內(nèi)其它相關(guān)文章.
分享到：
上一篇：js二級(jí)聯(lián)動(dòng)菜單
下一篇：[效果]JS折疊菜單-moo.fx.js

posted on 2012-09-14 16:37 ** 閱讀(1879) 評(píng)論(0)  編輯  收藏