easyui实例Layout

来源：互联网发布：域名大全编辑：程序博客网时间：2024/06/05 07:38

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

0 0