jQuery EasyUI页面布局加导航菜单例子

说明

上图导航栏由两部分构成，由accordion和tree两个控件实现。

1、

这个由accordion控件实现，能实现展开、折叠效果。

2、

这个是一个tree(树形)控件。

accordion(分类)控件代码

分 类控件允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容 可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。

<div id="menu" class="easyui-accordion" fit="true" border="false">
<div title="系统设置" data-options="iconCls:'icon-folder',selected:true" style="overflow:auto;padding:10px;">
                content1
</div>
<div title="菜单项目2" data-options="iconCls:'icon-folder'" style="padding:10px;">
                content2
</div>
<div title="菜单项目1" data-options="iconCls:'icon-folder'" style="overflow:auto;padding:10px;">
                content3
</div>
</div>