标题: EasyUI创建网站后台页面布局示例
作者: dnawo
日期: 2013-05-22 04:00 PM
分类: 脚本语言
内容:
demo.html：
复制内容到剪贴板 程序代码<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>demo</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
//1.全局对象
var EUTabs;
//2.初始化
$(document).ready(function () {
EUTabs = $("#easyui-tabs");
EUTabs.tabs({
fit: true,
plain: true
});
addtabs("welcome", "", "Welcome!");
});
//3.方法
addtabs = function (title, url, content) {
if (EUTabs.tabs("exists", title)) {
EUTabs.tabs("select", title);
} else {
var opt = { title: title, href: url, content: content, closable: true };
EUTabs.tabs("add", opt);
}
};
</script>
<style type="text/css">
#easyui-layout-north {
height: 80px;
}
#easyui-layout-west {
width: 190px;
}
#easyui-layout-center {
padding: 5px;
}
#easyui-layout-south {
height: 30px;
}
</style>
</head>
<body class="easyui-layout">
<div id="easyui-layout-north" region="north" split="true"></div>
<div id="easyui-layout-west" region="west" split="true" title="Control Panel">
<div id="easyui-accordion" class="easyui-accordion" fit="true">
<div title="Menu1">
<a href="#" onclick="addtabs('page1','','page1');return false;">page1</a><br />
<a href="#" onclick="addtabs('page2','','page2');return false;">page2</a>
</div>
<div title="Menu2">
content2
</div>
<div title="Menu3">
content3
</div>
</div>
</div>
<div id="easyui-layout-center" region="center">
<div id="easyui-tabs" class="easyui-tabs"></div>
</div>
<!--<div id="easyui-layout-south" region="south" split="true"></div>-->
</body>
</html>
+ 查看当前日志评论 (0)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.031 ms
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.031 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.031 ms