【布局】-001-后台布局典型案例 -

lipiaoshui2015

浏览: 108403 次

最近访客更多访客>>

damin

让蛋蛋飞_007

wang_eye

xiaoweishu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

【布局】-001-后台布局典型案例

博客分类：

easyui

【布局】-001-后台布局典型案例

1、Layout布局的选项

2、Accordion手风琴的选项

3、Tabs选项卡的方法

4、后台布局界面

5、WebContent/jsp/layout_001.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String root = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>布局案例</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" type="text/css" href="<%=root %>/css/common.css" />
<!-- 引入easyui依赖库 -->
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/icon.css" />
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function() {
		/*
			1.后台布局典型案例
			  1.1 整个布局分为【上、左、右】三部分
			  1.2 左边一般为菜单栏，region="west"，嵌入easyui-accordion手风琴组件
			  1.3 右边一般为内容区，region="center"，嵌入easyui-tabs选项卡组件
			  1.4 easyui-layout一般设置在<body>标签上，以充满整个区域
			2.layout布局组件的属性说明
			  2.1 title：layout panel的标题文字
			  2.2 region：定义layout panel的位置，其值是下列之一：north、south、east、west、center
			  2.3 split：true就显示拆分栏，用户可以用它改变panel的尺寸
			  2.4 iconCls：在panel头部显示一个图标的CSS类
			  2.5 fit：true表示自适应父容器
			  2.6 closable：true表示该选项卡可关闭
		*/
		$('a[title]').click(function(){
			var src = $(this).attr('title');
			var title = $(this).html();
			if($('#tt').tabs('exists',title)){
				$('#tt').tabs('select',title);
			} else {
				$('#tt').tabs('add',{   
				    title:title,   
				    content:'<iframe frameborder=0 style=width:100%;height:100% src=<%=root %>/' + src +' ></iframe>',   
				    closable:true  
				});  
			}
		});
	});
</script>
</head>
<body class="easyui-layout">
    <div region="north" title="布局案例" split="false" style="height:100px;"></div>  
    <div region="west" split="true" title="导航菜单" style="width:200px;">
		<div id="aa" class="easyui-accordion" fit=true>  
		    <div title="用户管理" iconCls="icon-user" style="overflow:auto;padding:10px;" selected="true" >  
		    	<a title="jsp/datagrid_004.jsp">用户列表</a><br/>
		    	<a title="jsp/form_004.jsp">添加用户</a> 
		    </div>  
		    <div title="岗位管理">  
		    </div>  
		    <div title="权限管理">  
		    </div> 
		    <div title="资源管理">  
		    </div> 				     
		</div>  
    </div>  
    <div region="center" title="主界面">
		<div id="tt" class="easyui-tabs" fit=true style="width:500px;height:250px;">  
			<div title="首页" closable=true>
				<div align="center" style="padding-top: 130px;"><font color="red" size="10">欢迎使用后台管理系统</font></div>
			</div>
		</div>  
    </div>  
</body>
</html>