<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery easy ui 学习之——Accordion</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Css/default.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/themes/icon.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.pack.js"></script>
<script type="text/javascript">
$(
function () {
$('#myaccrdion').accordion();
}
);
</script>
</head>
<body>
<div style=" 200px; height: 300px; overflow: hidden;" id="myaccrdion" border="true"
fit="falase" class="easyui-accordion">
<div title="控件使用" icon="icon-sys">
<ul>
<li>
<div class="selected">
<a href="http://hxling.cnblogs.com" target="mainFrame"><span class="icon-nav icon"></span>
菜单管理</a></div>
</li>
<li>
<div class="">
<a href="demo.html" target="mainFrame"><span class="icon-add icon"></span>添加用户</a></div>
</li>
<li>
<div class="">
<a href="demo2.html" target="mainFrame"><span class="icon-users icon"></span>用户管理</a></div>
</li>
<li>
<div class="">
<a href="demo2.html" target="mainFrame"><span class="icon-role icon"></span>角色管理</a></div>
</li>
<li>
<div class="">
<a href="demo.html" target="mainFrame"><span class="icon-set icon"></span>权限设置</a></div>
</li>
<li>
<div class="">
<a href="demo.html" target="mainFrame"><span class="icon-log icon"></span>系统日志</a></div>
</li>
</ul>
</div>
<div title="员工管理" icon="icon-sys">
员工管理
</div>
<div title="部门管理" icon="icon-sys">
部门管理
</div>
<div title="质量管理" icon="icon-sys">
质量管理
</div>
</div>
这个控件是有点类似menu控件，也需指定class="easyui-accordion"。另外我们要注意一下fit属性，<br />如果将fit属性指定为true，那么它的大小将自适应它的父容器。其他的到没有什么了？如果你自己觉<br />得还有疑问可以查阅官方文档。
</body>
</html>