EasyUI第一个程序

   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.target);
				// 没有子节点的才能点击生成选项
				if($('#tt').tree('isLeaf',node.target)){
					addPanel(node.text);
				}
				
			}
		});

		// 加载页面
        function addPanel(title){
		 	if($("#tb").tabs("exists",title)){
			   $("#tb").tabs("select",title);
			}else{
			   $("#tb").tabs("add",{
				   title: title,
				   content: '<div style="padding:10px">内容'+title+'</div>',//这里的content里放想要显示的界面
				   closable:true
			   });
			}
        }

	</script>
	
</body>

</html>


你可能感兴趣的:(EasyUI第一个程序)