Easyui首页html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta name="renderer" content="webkit"></meta><title>管理员操作平台</title><link href="/js/themes/default/easyui.css" rel="stylesheet" type="text/css"><link href="/js/themes/icon.css" rel="stylesheet" type="text/css"><script src="/js/jquery.min.js" type="text/javascript"></script> <script src="/js/jquery.easyui.min.js" type="text/javascript"></script><script src="/js/easyui-lang-zh_CN.js" type="text/javascript"></script>
</head>
<body style="margin:0px;">
<div class="easyui-layout" data-options="fit:true"><div data-options="region:'north'" style="height:60px;"><div class="top"><div class="top_left"><img src="/images/logo.jpg"/></div><div class="top_right"><p>欢迎您：admin <a href="http://localhost/user/logout.htm">退出</a></p></div></div> </div><div data-options="region:'west',split:'true',title:'导航'" style="width:220px"><div class="easyui-accordion" data-options="fit:true,border:false"><div title="系统管理"><a href="javascript:run('/user/view.htm', '用户管理')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-blank'" style="width:100%;text-align:left;">用户管理</a></div></div></div><div data-options="region:'center'" style="width:100%;height:100px;"><div id="tabs" class="easyui-tabs" data-options="fit:true,border:false"><!-- <div title="首页"></div>--></div></div><div class="easyui-panel" title="管理平台欢迎您" data-options="region:'south',collapsible:false"></div>
</div><script type="text/javascript">
function run(url, title) {if (url.substring(0, 4) != 'http') {url = 'http://localhost/' + url;}if ($("#tb").tabs("getTab", title)) {$("#tb").tabs("select", title);} else {if (url.substring(0, 4) != 'http') {//第一种打开页面方式$('#tb').tabs('add', {title: title,href: url,closable: true});}else{//另外一种打开页面方式$("#tb").tabs('add',{title:title,content:"<iframe id='" + title + "' frameborder=0 style='width:100%;height:100%'></iframe>",closable:true});$("#" + title)[0].src = url;}}
}
</script>
</body>
</html>easyui中首页通常是layout，一个layout能够划分成多个块，上北下南左西右东还有中。上方一般用来放logo，username，退出登录等信息，下方一般用来放公司信息，左边是导航栏。剩下的中间是不同的标签页。用来模拟多窗体模式。
导航栏用的是easyui中的accordion。api中并没有提到他，但他是最适合用来做导航栏的。
点击能够收缩扩展，效果不错。
js中run方法的意思是在中间的标签页中打开相应的页面。
run方法之所以用两种是由于打开的效果不同。第一种打开是在dom里面加了一个div。里面的css引用不会生效。里面的元素和整个窗口公用一个dom；另外一种方法打开是在里面加了一个iframe，和大窗口是子父窗口的概念，子窗口不会污染父窗口。
建议使用第二中。否则你会被越来越多的元素id重名而烦恼。
