easyui实例Layout

最新推荐文章于 2021-02-13 07:51:55 发布

天地星辰

最新推荐文章于 2021-02-13 07:51:55 发布

阅读量732

点赞数

分类专栏： javaWeb开发 jquery easyUI

本文链接：https://blog.csdn.net/mail_ldd/article/details/29366381

版权

jquery easyUI 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

javaWeb开发

2 篇文章 0 订阅

订阅专栏

最近闲来无事研究了一下web前端相关的easyUI,今后可能会用在项目中以便存储些知识。废话不多说，首先从自己写的几个小例子说起。

我们首先来看一下例子的效果图，然后我们从Layout说起.

实例的结构：web前端：jquery easyUI1.3.6 后台：struts2.3.15

首先我们来看一下导航页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/page/common_script.jsp" %>
<!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=UFT-8">
<title>无卡管理系统-航天数字传媒</title>
<link type="text/css" rel="stylesheet" href="css/common.css" />
<link type="text/css" rel="stylesheet" href="css/index.css" />
<script src="${basePath}/js/index.js"></script>

</head>
<div class="centerDiv ">
<div class="easyui-layout" style="width:800px;height:640px;">
	<div data-options="region:'north',border:false" style="height:99px;background:#B3DFDA;padding:2px">
		<jsp:include page="/page/header.jsp" />
	</div>
	
	<div data-options="region:'west',split:true,title:'无卡DRM'" style="width:200px;padding:10px;">
		<div class="easyui-accordion">
			<div title="功能菜单" data-options="iconCls:'icon-search'" style="padding:10px;">
				<div style="overflow: hidden;" id="menueTree" border="true"
		        fit="false" class="easyui-tree">
		     	</div>
		    </div>
	    </div>
	</div>
	
	<div data-options="region:'south',border:false" style="height:60px;background:#A9FACD;padding:10px;"><jsp:include page="page/footer.jsp" /></div>
	
	<div data-options="region:'center'">
		<div id="contentTabs" class="easyui-tabs" data-options="fit:true" style="">
    	</div>
	</div>
</div>
</div>
</html>

</pre><pre>

$(function () {
	 $('#myaccrdion').accordion();
	 $('#menueTree').tree({//左侧导航栏
		 fit:true,
		 data: [{
				 	id:1,
				 	/* url:'firmInfoManager.action', */
				 	url:'page/firmmng/FirmRegManager.jsp',
					text: '设备注册管理'
				},
				{
					id:2,
					url:'page/firmmng/EndProductKey.jsp',
					text: '成品Key文件管理'
				}
				],
			onClick: function(node){
				openCenterWin(node);
			}
		});
});

function getCenterWin(_title){//当点击左侧导航栏后页面内容在右侧展现，如果已经打开的页面则不再重新显示
	if(!_title)
		return null;
	var targetTab = $('#contentTabs').tabs('getTab', _title);
	return targetTab;
}

function openCenterWin(_node){
	var tabTitle = _node.text;
	var targetTab = getCenterWin(tabTitle);
	if(targetTab) {
		$('#contentTabs').tabs('select', tabTitle);
		return;
	}
	var jspUrl = _node.url;
	var tabOps = {
		title: tabTitle,
		iconCls: _node.iconCls,
		closable: true,
		href:jspUrl,
		fit:true,
		border:false,
	};
	$('#contentTabs').tabs('add',tabOps);
	/* $('#pdcMainFrame').find(".panel-body").css("overflow","visible"); */
}

var index = 0;
function addPanel(){
    index++;
    $('#contentTabs').tabs('add',{
        title: 'Tab'+index,
        content: '<div style="padding:10px">Content'+index+'</div>',
        closable: true
    });
}

function removePanel(){
    var tab = $('#contentTabs').tabs('getSelected');
    if (tab){
        var index = $('#contentTabs').tabs('getTabIndex', tab);
        $('#contentTabs').tabs('close', index);
    }
}