Python easyui的Layout

最新推荐文章于 2022-02-23 11:30:45 发布

普通人zxx

最新推荐文章于 2022-02-23 11:30:45 发布

阅读量461

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_37511809/article/details/78583982

本文介绍了一个基于Java的无卡管理系统界面设计，采用EasyUI框架实现动态加载不同功能模块，如设备注册管理和成品Key文件管理等。通过JavaScript实现了左侧导航栏与右侧内容区域的联动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ 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;
}

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);
    }
}