文档章节

EasyUI第一个程序

别寒
 别寒
发布于 2015/11/04 11:29
字数 643
阅读 267
收藏 4

   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>


© 著作权归作者所有

别寒
粉丝 30
博文 273
码字总数 155300
作品 0
永州
程序员
私信 提问
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
2018/06/28
0
0
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.2K
3
我觉得jwwui就是抄袭easyui,大家有什么要说的

我这个人吧,就是爱较真。不骗别人,也不喜欢被别人骗。本来呢,我觉得jwwui就算是照着easyui抄出来的,作者也是一个牛逼的人物,毕竟那么多代码,又是不好整理结构的javascript。 但是呢,毕...

纠结名字
2015/01/16
6.5K
42
asp.net easyui 动态绑定下拉框

前台: 标题

李洛尘
03/20
0
0
关于EasyUI使用tree方法生成树形结构加载两次的问题

html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解...

Doublec
2015/04/21
4K
0

没有更多内容

加载失败,请刷新页面

加载更多

MongoDB复制集

MongoDB复制集 2017年07月09日 19:36:01 zzm_ 阅读数 1 原文链接:http://blog.51cto.com/dreamlinux/1945705 MongoDB目前的高可用架构主要有主从、复制集、以及分片,单纯的主从技术几乎被淘...

linjin200
14分钟前
5
0
高防CDN是如何保障互联网安全?

DDoS攻击,一直是剪不断理还乱,而如何防御DDoS,也一直是网络安全的世纪难题。虽然CDN技术在不断增强,但更可怕的是DDoS攻击手段也在不断升级多元化,攻击渠道甚至更多种,所以普通的CDN加速...

云漫网络Ruan
16分钟前
5
0
springcloud 配置 springboot admin详解

1.配置pom 引入相关依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jetty</artifactId> </dependenc......

spirngbootcloudssm
16分钟前
3
0
Mockito 2 关于打标(stubbing)

请参考下面有关于打标的代码。 //You can mock concrete classes, not just interfaces LinkedList mockedList = mock(LinkedList.class); //stubbing when(mockedList.get(0)).thenReturn("......

honeymoose
18分钟前
4
0
kafka安装和启动

kafka的背景知识已经讲了很多了,让我们现在开始实践吧,假设你现在没有Kafka和ZooKeeper环境。 Step 1: 下载代码 下载1.1.0版本并且解压它。 > tar -xzf kafka_2.12-2.3.0.tgz> cd kafka_...

roockee
21分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部