Python easyui的Layout

来源:互联网 发布:ipad壁纸 知乎 编辑:程序博客网 时间:2024/05/21 11:16


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