上一篇
下一篇
jquery accordion 折叠效果(菜单) 插件
作者:亮亮 日期:2009-07-21
首先引入以下文件：
jq文件
chili-1.7.pack.js
jquery.dimensions.js
jquery.accordion.js
下面是折叠区域内容：
程序代码<div id="acc">
<a href="#">日语人才1</a>
<div>test<br /><br /><br />test<br /><br /><br /></div>
<a href="#">日语人才2</a>
<div>test<br /><br /><br />test<br /><br /><br /></div>
<a href="#">日语人才3</a>
<div>test<br /><br /><br />test<br /><br /><br /></div>
<a href="#">日语人才4</a>
<div>test<br /><br /><br />test<br /><br /><br /></div>
</div>
折叠区域的样式
程序代码<style type="text/css">
#acc{
width:200px;
border:1px solid #9999FF;
}
#acc a{
display:block;
line-height:25px;
background-color:#CC99FF;
cursor:pointer;
text-decoration:none;
color:#000000;
}
#acc a:hover{
background-color:#CCCCFF;
color:#FFFFFF;
}
#acc a.selected {
color:#CC6600;
}
</style>
最后就简单了
程序代码$(document).ready(function(){
$("#acc").accordion();
});
</script>
看看效果
一个折叠效果就完成了，这里全部用的插件默认的设置，当然也可以给插件指定参数，看下面的一个折叠效果：
首先引入另一个js文件jquery.easing.js，这个主要是供参数animated使用的
折叠区域内容：
程序代码<ul id="acc">
<li><a href="#" class="ttl">折叠1</a>
<div>
<p>这是测试折叠</p><p>这是测试折叠</p><p>这是测试折叠</p><p>这是测试折叠</p><p>这是测试折叠</p>
</div>
</li>
<li><a href="#" class="ttl">折叠2</a>
<div>
<p>这是测试折叠</p><p>这是测试折叠</p><p>这是测试折叠</p>
</div>
</li>
<li><a href="#" class="ttl">折叠3</a>
<div>
<p>这是测试折叠sfgsfgsdgfsfg测试折叠</p><p>这是测试折叠</p><p>这是测试折叠</p>
</div>
</li>
<li><a href="#" class="ttl">折叠4</a>
<div>
<p>esdfsgdhdghd是测试折叠</p><p>这是测试折叠</p><p>这是测试折叠</p>
</div>
</li>
</ul>
[/url]
样式
[code]
*{
margin:0px;
padding:0px;
font-size:12px;
}
ul{
display:block;
width:200px;
border:1px solid #CC99FF;
}
ul li{
display:block;
list-style:none;
}
ul li a{
display:block;
line-height:25px;
text-align:center;
text-decoration:none;
cursor:pointer;
color:#000000;
background-color:#CC99FF;
}
ul li a:hover{
background-color:#FFCCFF;
}
ul li a.selected{
color:#663300;
}
执行插件
程序代码$(document).ready(function(){
$("#acc").accordion({
autoheight: false,
active: 1,//false为都折叠，要某个不折叠，只要设置index即可
header: '.ttl',//可以折叠的元素
event: 'click',//折叠展开时的事件
fillSpace: false,
animated: 'bounceslide'//bounceslide,easeslide展开折叠时的动态效果，需要引入其他js文件（UI Effects
});
});
</script>
具体的就不说了，后面有注释，还是看看效果
当然也可以用这个插件做折叠菜单，具体的代码不帖了，后面有下载，只给个演示
代码下载
[本日志由 亮亮 于 2009-07-21 09:17 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: jquery accordion 折叠效果(菜单) 插件
文章来自: 本站原创引用通告: 查看所有引用 | 我要引用此文章Tags: jquery accordion 折叠效果(菜单) 插件 评论: 1 | 引用: 0 | 查看次数: -
回复
日光博客[2009-07-22 11:51 AM | 
]发表评论
