Easyui的accordion的使用

accordion是折叠控件，帮助文档中有例子

可以嵌套使用，例如折叠控件里面有一个菜单

<div data-options="region:'west',split:true,title:'菜单栏'" style="width:150px;padding:10px;">
    <div class="easyui-accordion" style="width:500px;height:300px;">
        <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
            <ul id="tt"></ul>
        </div>
    </div>
</div>Code language: HTML, XML (xml)

修改内容如上面代码

我们还可以增加多几个折叠区域

<div data-options="region:'west',split:true,title:'菜单栏'" style="width:150px;padding:10px;">
    <div class="easyui-accordion" style="width:500px;height:300px;">
        <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
            <ul id="tt"></ul>
        </div>
        <div title="系统设计" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
        </div>
        <div title="用户管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
        </div>
        <div title="帮助" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
        </div>
    </div>
</div>Code language: HTML, XML (xml)

增加全屏显示属性 如下图 data-options=”fit:true”

<div data-options="region:'west',split:true,title:'菜单栏'" style="width:150px;">
    <div class="easyui-accordion" data-options="fit:true" style="width:150px;">
        <div title="用户管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
            <ul id="tt"></ul>
        </div>
        <div title="系统设计" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
        </div>
        <div title="帮助" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
        </div>
    </div>
</div>Code language: HTML, XML (xml)

这样这个折叠控件就可以占满整个区域。