最近闲来无事研究了一下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);
}
}