标签：
Vietnam项目又需要添加一个管理后台，前段时间一直在想如何实现界面，因为公司没有美工和设计师，项目的前台、业务逻辑、数据库一直都是自己一个人在做，以往做的都是以功能为主，对页面要求的能简单就简单，因为实在是抽不出时间来对页面进行设计和制作，这次想尝试一下“用心”的界面制作 嘿嘿~~~ 在了解过extjs和EasyUI之后，选择了EasyUI这个框架，除了简单、轻量之外，更重要的是这个框架基于jquery，对我来说更容易上手，节省开发时间。下面是的首页是由布局组件、tree组件和tabs组件实现的，暂定的基本框架是就酱~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<!-- 头部 -->
<div data-options="region:‘north‘,border:false" style="height:60px;background:#B3DFDA;padding:10px">Vietnam</div>
<!-- 左侧栏 -->
<div data-options="region:‘west‘,split:true,title:‘西‘" style="width:150px;padding:10px;">
<ul id="tt" class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li><span>File 11</span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
</div>
<!-- 中部主体 -->
<div data-options="region:‘center‘,title:‘中‘">
<div id="tb" class="easyui-tabs" data-options="fit:true,border:false,plain:true">
<div title="首页" style="padding:10px">
<p style="font-size:14px">jQuery EasyUI框架能够让你轻松构建Web页面.</p>
<ul>
<li>easyui是一套基于JQuery的用户界面插件集合.</li>
<li>easyui为构建现代流行的交互式体验JavaScript应用程序提供了基本功能.</li>
<li>使用easyui你不需要写很多javascript代码，你通常只需要写一些html标签来定义用户界面.</li>
<li>完美支持HTML5.</li>
<li>easyui能够有效地节省你的开发时间.</li>
<li>easyui很简单但是很强大.</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(‘#tt‘).tree({
onClick: function(node){
//alert(node.text);
addPanel(node.text);
}
});
function addPanel(titleName){
$(‘#tb‘).tabs(‘add‘,{
title: titleName,
content: ‘<div style="padding:10px">内容‘+titleName+‘</div>‘,
closable: true
});
}
</script>
</body>
</html>
标签：
原文地址：http://my.oschina.net/hehongbo/blog/525704
