easyui-layout 模版

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!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=UTF-8" >
<title>教務系統</title>
<link rel="stylesheet" type="text/css" href="<%= basePath %>themes/default/easyui.css" charset="utf-8">
<link rel="stylesheet" type="text/css" href="<%= basePath %>themes/icon.css"  charset="utf-8">
<link rel="stylesheet" type="text/css" href="<%= basePath %>themes/demo.css">
<script type="text/javascript" src="<%= basePath %>js/jquery.min.js"></script>
<script type="text/javascript" src="<%= basePath %>js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%= basePath %>js/easyui-lang-zh_CN.js"></script>  
</head> 
<style>
body{padding:0;margin:0}
</style>
<script type="text/javascript">  
   $(document).ready(function(){                            //頁面加載完成控制高度
       var height1 = $(window).height()-20;  
       $("#main_layout").attr("style","width:100%;height:"+height1+"px");  
       $("#main_layout").layout("resize",{  
           width:"100%",  
           height:height1+"px"  
       });  
   });      
     
   $(window).resize(function(){  //窗口大小改變時控制高度
       var height1 = $(window).height()-30;  
       $("#main_layout").attr("style","width:100%;height:"+height1+"px");  
       $("#main_layout").layout("resize",{  
           width:"100%",  
           height:height1+"px"  
       });  
   });   
</script>  
</head>  
<body>  
<div style="margin-top:5px;margin-left:5px;margin-right:5px;margin-bottom:5px;">  
   <div id="main_layout" class="easyui-layout"  style="width:100%; height:680px;">
     
       <!-- 上方 -->  
       <div data-options="region:'north'" style="height: 80px;background-color:#95B8E7;">  
           <span style="margin-left:0.5%;">  
               <font size="3" style="line-height: 2.0em;" color="white" >  
                   <b>青鳥教務管理系統 </b>  
               </font>  
           </span>  
             
           <span style="float:right;margin-top:10px;margin-right:20px;">  
               <font size="3" color="white">歡迎 :Admin</font>      
               <a href="<%=path %>/loginOut.do" > <font size="3" color="red">退出</font> </a>  
           </span>  
       </div>  
         
       <!-- 左邊 -->  
       <div data-options="region:'west',split:true" title="管理列表" style="width: 200px;">  
           <div class="easyui-accordion"  data-options="fit:true,border:false">                  
               <div title="Title1" style="padding:10px;">
                   content1
               </div>
               <div title="Title2" data-options="selected:true" style="padding:10px;">
                   content2
               </div>
               <div title="Title3" style="padding:10px">
                   content3
               </div>           
           </div>  
       </div>  
       <!-- 中間 -->  
       <div data-options="region:'center',title:'操作頁面'">  
           <div id="tTabs" class="easyui-tabs" data-options="fit:true,border:false,plain:true">  
               <div title="DDDDD"  
                   data-options="closable:true,href:'<%=path%>/view/gmtool/welcome.jsp'"  
                   style="overflow: auto; padding: 20px;">  
               </div>  
           </div>  
       </div>  
       <!-- 下方 -->  
       <div data-options="region:'south',split:true" style="height:5%;background-color:#95B8E7;">  
           <div style="" align="center">  
               <font size="" color="white">教務管理系統 © 版權所有 </font>  
           </div>  
       </div>  
   </div>  
</div>  
</body>  
</html> 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章