折叠菜单(accordion),和选项卡一样也是一种在同一个页面上切换不同内容的功
能UI。它和选项卡的使用几乎没有什么太大区别,只是显示的效果有所差异罢了。
一.使用accordion
使用accordion 比较简单,但需要按照指定的规范即可。
html :
<div id="accordion">
<h1>菜单1</h1>
<div>内容1</div>
<h1>菜单2</h1>
<div>内容2</div>
<h1>菜单3</h1>
<div>内容3</div>
</div>
jQuery :
$('#accordion').accordion();
二.修改accordion 样式
在显示的accordion 折叠菜单中,在火狐浏览器中打开Firebug 或者右击->查看元素。
这样,可以看看accordion 的样式,根据样式进行修改。为了和网站主题符合,对accordion
的标题背景进行修改。
//无须修改ui 里的CSS,直接用style.css 替代掉
.ui-widget-header {
background:url(../img/xxx.png);
}
三.accordion()方法的属性
选项卡方法有两种形式:1.accordion(options),options 是以对象键值对的形式传
参,每个键值对表示一个选项;2.accordion('action', param),action 是操作选项卡
方法的字符串,param 则是options 的某个选项。
属性 |
默认值/类型 |
说明 |