摘要：JQueryUI（Accordion）
1：Accordion的结构，首先我们先看一个基本的例子。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A basic accordion implementation</title>
<link href="../css/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/redmond/ui.accordion.css" />
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../ui/ui.core.js"></script>
<script type="text/javascript" src="../ui/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#accordion").accordion({ header: "h3" });
});
</script>
<style type="text/css">
body
{
font: 62.5% "Trebuchet MS" , sans-serif;
margin: 10px;
}
</style>
</head>
<body>
<div id="accordion">
<div>
<h3>
<a href="#">First</a></h3>
<div>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3>
<a href="#">Second</a></h3>
<div>
Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3>
<a href="#">Third</a></h3>
<div>
Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</body>
</html>
效果图如下：
![L~6[}X@MFAMV9]`78U)GMLC](http://images.cnblogs.com/cnblogs_com/sunfishlu/WindowsLiveWriter/JQueryUIAccordion_13386/L~6%5B%7DX@MFAMV9%5D%6078U)GMLC_2.jpg "L~6[}X@MFAMV9]`78U)GMLC")
2：配置项
2.1：active，初始化时，展开的项。
2.2：event，切换选项卡的事件，默认为click。（mouseover，鼠标滑过切换）
2.3：alwaysOpen，保证有一个选项是展开的。默认为true。
2.4：animated，设置动画效果。
2.5：autoHeight，各个选项的高度设置为所有内容中最高的高度。
2.6：clearStyle，折叠面板后自动清除 height 和 overflow 样式.
2.7：fillSpace，充满容器的高度，此时autoHeight无效。
2.8：header，设置头元素，$("#accordion").accordion({ header: "h3" });
2.9：navigation
2.10:navigationFilter
3：方法
3.1：destroy，销毁。$("#accordion").accordion("destroy");
3.2：enable和disable。$("#accordion").accordion("enable");和$("#accordion").accordion("disable");允许和禁止操作面板。
3.3：activate"，打开指定的面板。$("#accordion").accordion("activate", choice - 1);
3.4：option，得到折叠面板的属性。
获取：var clearStyle = $("#id").accordion("option","clearStyle");
设置：$("#id").accordion("option","clearStyle",true);
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。