学步园

html代码：

<div id="menu">
<div title="Title1">
        content1
</div>
<div title="Title2">
        content2
</div>
<div title="Title3">
        content3
</div>
</div>

1、accordion

<link type="text/css" rel="stylesheet" href="jquery-easyui-1.2.3/themes/default/easyui.css">
<link type="text/css" rel="stylesheet" href="jquery-easyui-1.2.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.2.3/jquery-1.6.2.min.js">
<script type="text/javascript" src="jquery-easyui-1.2.3/jquery.easyui.min.js">
<script type="text/javascript" src="jquery-easyui-1.2.3/locale/easyui-lang-zh_CN.js">
<script type="text/javascript">
    $(function () {
        $("#menu").accordion();
    });
</script>

2、设置accordion的Width、Height

<script type="text/javascript">
    $(function () {
        $("#menu").accordion({
            width: 300,
            height: 300,
        });
    });
</script>

3、select设置accordion当前pannel

<script type="text/javascript">
    $(function () {
        $("#menu").accordion({
            width: 300,
            height: 300,
        });

        $("#menu").accordion("select", "Title2");
    });
</script>

4、fit

fit为true时，width及height无效

<script type="text/javascript">
    $(function () {
        $("#menu").accordion({
            fit: true
        });
    });
</script>

或

<div id="menu" fit="true">
<div title="Title1">
        content1
</div>
<div title="Title2">
        content2
</div>
<div title="Title3">
        content3
</div>
</div>

5、border

取消accordion边界线border

<div id="menu" border="false">
<div title="Title1">
        content1
</div>
<div title="Title2">
        content2
</div>
<div title="Title3">
        content3
</div>
</div>

6、panel icon

<div id="menu">
<div title="Title1" iconCls="icon-ok">
        content1
</div>
<div title="Title2">
        content2
</div>
<div title="Title3">
        content3
</div>
</div>

7、添加accordion panel

$("#menu").accordion("add",{
    title: "New Title",
    content: "New Content",
    iconCls: "icon-ok"
});

8、删除accordion panel

var pnl = $("#menu").accordion("getSelected");
if (pnl)
{
var title = pnl.panel("options").title;
    $('#aa').accordion("remove",title);
}