easyui首页模板
Posted lxjshuju
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了easyui首页模板相关的知识，希望对你有一定的参考价值。
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重名而烦恼。
以上是关于easyui首页模板的主要内容，如果未能解决你的问题，请参考以下文章