EasyUI基础学习

其他 2020-01-13 22:15:19 阅读次数: 0

1.  EasyUI的准备工作

easyUI作为一个前端框架，其样式和js是必不可少的。我们要使用它，必须要最少引入两个css与两个js文件

link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">

<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

1.1 在项目中引入easyUI的内容

2. EasyUI的布局组件 layout

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSS和JS -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<div id="cc" class="easyui-layout" data-options="fit:true">   
    <div data-options="region:'north',title:'CRM管理系统',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'系统菜单',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'数据区域'" style="padding:5px;background:#eee;"></div>   
</div>  
</body>
</html>

3. easyUI的分类组件accordion

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSS和JS -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">   
    <div title="客户管理" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;">   
    	<a href="#">客户管理</a>
    </div>   
    <div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">   
    </div>   
    <div title="Title3">   
    </div>   
</div>  
</body>
</html>

4. easyUI的选项卡

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSS和JS -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#btn").click(function(){
			// 判断选项卡是否存在:
			var flag = $("#tt").tabs("exists","客户管理");
			if(flag){
				// 已经存在该选项卡
				$('#tt').tabs("select","客户管理");
			}else{
				// 不存在该选项卡
				$('#tt').tabs('add',{    
				    title:'客户管理',    
				    content:'客户管理数据',    
				    closable:true    
				}); 
			}
		});
	});
</script>
</head>
<body>
<a href="#" id="btn" class="easyui-linkbutton">按钮</a>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="数据区域" data-options="closable:true" style="padding:20px;display:none;">   
        	数据区域 
    </div>   
</div>  
</body>
</html>

4.1 点击菜单创建新的选项卡

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="./themes/icon.css">
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
		<style type="text/css">
		.menuA{
			text-decoration :none;
		}
	</style>
	
	<script type="text/javascript">
		$(function(){
			$(".menuA").click(function(){
				var contentText = this.innerHTML;
				createTab(contentText);
				return false;
			});
		});
		
		function createTab(contentText){
			// 判断选项卡是否存在:
			var flag = $("#tt").tabs("exists",contentText);
			if(flag){
				// 如果已经存在，让其被选中
				$("#tt").tabs("select",contentText);
			}else{
				// 如果不存在,创建新的选项卡
				$('#tt').tabs('add',{    
				    title:contentText,    
				    content:contentText,    
				    closable:true   
				}); 
			} 
		}
		
		
	</script>
</head>
<body>
<div id="cc" class="easyui-layout" data-options="fit:true">   
    <div data-options="region:'north',title:'CRM管理系统',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'系统菜单',split:true" style="width:200px;">
    	<div id="aa" class="easyui-accordion" data-options="fit:true">   
		    <div title="客户管理" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
		    	<a href="customer.html" class="menuA">客户列表</a>
		    </div>   
		    <div title="联系人管理" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   
		        <a href="linkman.html" class="menuA">联系人列表</a>
		    </div>   
		    <div title="拜访记录管理" data-options="iconCls:'icon-help'">   
		       <a href="#" class="menuA">拜访记录列表</a>
		    </div>   
		    <div title="统计分析管理" data-options="iconCls:'icon-search'" style="padding:10px;">   
		        <a href="#" class="menuA">统计分析管理</a>
		    </div>   
		    <div title="系统管理" data-options="iconCls:'icon-ok'">   
		       <a href="#" class="menuA">系统管理</a>
		    </div> 
		</div>  
    </div>   
    <div data-options="region:'center',title:''" style="padding:5px;background:#eee;">
    	<div id="tt" class="easyui-tabs" data-options="fit:true">   
		    <div title="数据显示" style="padding:20px;display:none;">   
		        数据
		    </div>   
		</div> 
    </div>   
</div>  
</body>
</html>

4.2 选项卡上加载数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="./themes/icon.css">
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
		<style type="text/css">
		.menuA{
			text-decoration :none;
		}
	</style>
	
	<script type="text/javascript">
		$(function(){
			$(".menuA").click(function(){
				var contentText = this.innerHTML;
				var url = this.href;
				alert(url);
				createTab(contentText,url);
				// 超链接就不跳转
				return false;
			});
		});
		
		function createTab(contentText,url){
			// 判断选项卡是否存在:
			var flag = $("#tt").tabs("exists",contentText);
			if(flag){
				// 如果已经存在，让其被选中
				$("#tt").tabs("select",contentText);
			}else{
				// 如果不存在,创建新的选项卡
				$('#tt').tabs('add',{    
				    title:contentText,    
				    content:createUrl(url),    
				    closable:true   
				}); 
			} 
		}
		
		function createUrl(url){
			return "<iframe src='"+url+"' style='width:100%;height:95%;border:none;'></iframe>";
		}
	</script>
</head>
<body>
<div id="cc" class="easyui-layout" data-options="fit:true">   
    <div data-options="region:'north',title:'CRM管理系统',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'系统菜单',split:true" style="width:200px;">
    	<div id="aa" class="easyui-accordion" data-options="fit:true">   
		    <div title="客户管理" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
		    	<a href="customer.html" class="menuA">客户列表</a>
		    </div>   
		    <div title="联系人管理" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   
		        <a href="linkman.html" class="menuA">联系人列表</a>
		    </div>   
		    <div title="拜访记录管理" data-options="iconCls:'icon-help'">   
		       <a href="#" class="menuA">拜访记录列表</a>
		    </div>   
		    <div title="统计分析管理" data-options="iconCls:'icon-search'" style="padding:10px;">   
		        <a href="#" class="menuA">统计分析管理</a>
		    </div>   
		    <div title="系统管理" data-options="iconCls:'icon-ok'">   
		       <a href="#" class="menuA">系统管理</a>
		    </div> 
		</div>  
    </div>   
    <div data-options="region:'center',title:''" style="padding:5px;background:#eee;">
    	<div id="tt" class="easyui-tabs" data-options="fit:true">   
		    <div title="数据显示" style="padding:20px;display:none;">   
		        数据
		    </div>   
		</div> 
    </div>   
</div>  
</body>
</html>

注意：这里主要实现是通过内嵌框架iframe来实现的。

武汉小喽啰
发布了128 篇原创文章 · 获赞 6 · 访问量 3281
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43318134/article/details/102647180
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022