easyui学习笔记2：页面布局，layout插件

最新推荐文章于 2024-04-13 07:08:23 发布

mypanlong

最新推荐文章于 2024-04-13 07:08:23 发布

阅读量1k

点赞数

分类专栏： Jquery Easy UI

Jquery Easy UI 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

摘要使用Easyui Layout插件对页面布局。

easyui layout

目录[-]

一、引言

EasyUI 提供的一种非常便捷的组件easyui-layout，来完成对系统页面的整体布局。它将页面分为北(north)、东(east)、南(south)、西(west)、中(center)等五个部分，代表页面的上、右、下、左、中间（主工作区）等区域。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。

二、创建布局

创建布局需指定元素class="dasyui-layout"。布局有两种方式创建，一种是通过标记创建，即<div id="cc" class="easyui-layout"> </div>。另一种是在整个页面创建布局，即<body class="easyui-layout"></body>。

这里我们采用第二种方式，代码如下：

 
         < 
         html 
         >  
        
 
         < 
         head 
         >  
        
 
              
         < 
         meta  
         charset 
         = 
         "UTF-8" 
         >  
        
 
              
         < 
         title 
         >easyui学习笔记</ 
         title 
         >  
        
 
              
         < 
         link  
         id 
         = 
         "easyuiTheme"  
         rel 
         = 
         "stylesheet"  
         type 
         = 
         "text/css"  
         href 
         = 
         "jslib/easyui1.3.5/themes/default/easyui.css" 
         />  
        
 
              
         < 
         link  
         rel 
         = 
         "stylesheet"  
         type 
         = 
         "text/css"  
         href 
         = 
         "jslib/easyui1.3.5/themes/icon.css" 
         />  
        
 
              
         < 
         script  
         type 
         = 
         "text/javascript"  
         src 
         = 
         "jslib/easyui1.3.5/jquery.min.js" 
         ></ 
         script 
         >  
        
 
              
         < 
         script  
         type 
         = 
         "text/javascript"  
         src 
         = 
         "jslib/easyui1.3.5/jquery.easyui.min.js" 
         ></ 
         script 
         >  
        
 
              
         < 
         script  
         type 
         = 
         "text/javascript"  
         src 
         = 
         "jslib/easyui1.3.5/locale/easyui-lang-zh_CN.js"  
         charset 
         = 
         "utf-8" 
         ></ 
         script 
         >  
        
 
         </ 
         head 
         >  
        
 
         < 
         body  
         class 
         = 
         "easyui-layout" 
         >  
        
 
              
         < 
         div  
         id 
         = 
         "head"  
         data-options 
         = 
         "region:'north'"  
         style 
         = 
         "height:60px;" 
         >  
        
 
                  
         < 
         div  
         style 
         = 
         "height:30px;font-size:30px" 
         >MISP</ 
         div 
         >  
        
 
              
         </ 
         div 
         >  
        
 
              
         < 
         div  
         id 
         = 
         "foot"  
         data-options 
         = 
         "region:'south'"  
         style 
         = 
         "height:30px;text-align: center;background: #D2E0F2" 
         >CopyRight:SCAU</ 
         div 
         >  
        
 
              
         < 
         div  
         id 
         = 
         "nav"  
         data-options 
         = 
         "region:'west',split:true"  
         style 
         = 
         "width:200px"  
         title 
         = 
         "导航" 
         >  
        
 
              
         </ 
         div 
         >  
        
 
              
         < 
         div  
         id 
         = 
         "mainPanle"  
         data-options 
         = 
         "region:'center'" 
         >  
        
 
                  
         < 
         div  
         id 
         = 
         "tabs"  
         class 
         = 
         "easyui-tabs"  
         data-options 
         = 
         "fit:true, border: false"  
         >  
        
 
                      
         < 
         div  
         title 
         = 
         "About"  
         data-options 
         = 
         "iconCls:'icon-tip'" 
         >  
        
 
                          
         < 
         iframe  
         src 
         = 
         "about.html"  
         style 
         = 
         "border: 0; width: 100%; height: 98%;"  
         frameBorder 
         = 
         "0" 
         ></ 
         iframe 
         >  
        
 
                      
         </ 
         div 
         >  
        
 
                  
         </ 
         div 
         >      
        
 
              
         </ 
         div 
         >  
        
 
         </ 
         body 
         >  
        
 
         </ 
         html 
         > 
        