easyUi学习之layout的布局设置

lijie_insist

浏览: 95562 次
性别:

最近访客更多访客>>

hotfiremsn

源崇1

zean7s

yyy1394

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

easyUi学习

今天在项目中看到了一个easyui的布局相关的,就找了下网上的例子,自己仿写了个,结合tabs和accordor
结果图如下:

其中上面相当于logo部分,中间是左边菜单栏(accordor)点击后添加的tabs,下面是底部的说明相关,右边是空白

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="js/jquery/jquery-easyui-1.2.1/themes/icon.css">
		<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js">
</script>
		<script type="text/javascript"
			src="js/jquery/jquery-easyui-1.2.1/jquery.easyui.min.js">
</script>
		<!-- 简单的样式 -->
		<style type="text/css">
.footer .foot {
	background: url("img/foot_bg.jpg");
	text-align: center;
	color: #FFFFFF;
}
</style>
	</head>

	<body class="easyui-layout">
		<!-- 顶部放那个主页信息什么的 -->
		<div class="head" region="north" title="North Title" split="true"
			style="height: 100px;">
			<p style="position: absolute; right: 18px; top: 20px;">
				<a href="javascript:void(0);" class="easyui-menubutton"
					iconCls="icon-ok">更换皮肤</a> 登录身份：
				<strong>肥猫钓鱼</strong>&nbsp&nbsp欢迎您访登录！
				<a href="#">退出</a>
			</p>
			<p style="position: absolute; right: 18px; top: 55px;">
				今天是：2014年2月14号星期天
			</p>
		</div>
		<!-- 底部一般放版权什么的 -->
		<div class="footer" region="south" split="true" style="height: 23px;">
			<div class="foot">
				Copyright © 2012 - 2018 All Rights Reserved 肥猫钓鱼 版权所有
				湘ABC备88888888号-8
			</div>
		</div>
		<div region="east" iconCls="icon-reload" title="East" split="true"
			style="width: 100px;"></div>
		<!-- 左边可以放菜单栏,来显示菜单,可以用tree形式显示,我们项目中就是用的tree -->
		<div region="west" split="true" title="West" style="width: 150px;">
			<div class="easyui-accordion"
				data-options="border:false,fit:true" animate="false">
				<!-- 可用c标签的foreach来读取后台的菜单树 -->
				<div title="&nbsp;&nbsp;&nbsp;&nbsp;菜单1">
					<!--ul的id可以设置成ul${item.id},这样就能出发点击事件或者别的事件 -->
					<ul onclick="addTab(this.innerHTML,'http://localhost:8082/TestEasyUi/tab1.jsp')">子菜单1-1</ul>
				</div>
				<div title="&nbsp;&nbsp;&nbsp;&nbsp;菜单2"  >
					<ul onclick="addTab(this.innerHTML,'http://localhost:8082/TestEasyUi/tab1.jsp')">子菜单2-1</ul>
				</div>
				<div title="&nbsp;&nbsp;&nbsp;&nbsp;菜单3" >
					<ul  onclick="addTab(this.innerHTML,'http://localhost:8082/TestEasyUi/tab1.jsp')">子菜单3-1</ul>
				</div>
				<div title="&nbsp;&nbsp;&nbsp;&nbsp;菜单4" >
					<ul  onclick="addTab(this.innerHTML,'http://localhost:8082/TestEasyUi/tab1.jsp')">子菜单4-1</ul>
				</div>
			</div>
		</div>
		<!-- 中间可以用来存放tabs,通过左边点击事件来填充tabs -->
		<div region="center" title="center title"
			style="padding: 5px; background: #eee;">
			<div id="tts" class="easyui-tabs"
				data-options="border:false,fit:true">

			</div>
		</div>
	</body>
	<script type="text/javascript">
	//官方demo
	function addTab(title, url){  
            if ($('#tts').tabs('exists', title)){  
                $('#tts').tabs('select', title);  
            } else {  
                var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';  
                $('#tts').tabs('add',{
                    title:title,  
                    content:content,  
                    closable:true  
                });  
            }  
        }  
	//下面是我项目中的代码,不知道是不是js的问题,tabCount一直说没定义,然后就是
	//在打开多个tab标签时候,不能打开多个,只能打开一个,而官方的demo则是可以打开
	//多个,我看了下好像是href的原因
function acc_AddTab(title, href, reload) {
	var tabCount = $('#tts').tabs('tabs').length;
	alert(tabCount);
	var hasTab = $('#tts').tabs('exists', title);
	alert(hasTab);
	if (tabCount > 2 && !hasTab) {
		var msg = '您当前打开太多页面，如果继续打开，会降低页面加载速度！'
		alert("系统提示")
	} else {
		ttt(title, href, hasTab, reload);
	}
}

function ttt(title, href, hasTab, reload) {
	if (!hasTab) {
		add_tab(title, href);
	} else {
		if (reload) {
			$('#tts').tabs('close', title);
			add_tab(title, href);
		} else {
			$('#tts').tabs('select', title);
		}
	}
}

function add_tab(title, href) {
	$('#tts').tabs('add', {
  	    title : title,
		href : href,
		closable : true,
		scroll : true,
		cache : true 
	});
}
</script>
</html>