EasyUI(四)布局

为什么要布局

项目当中不止一个页面,好多个界面如何显示到一个浏览器而且还是要有组织的。
布局与后台几乎没有交互因此用html的方式声明。

布局面板

布局面板一般下边和右边不用显示,创建该控件两种方式:

  1. 创建布局面板

使用HTML标签创建布局面板,只须要对<div>标签引用’easyui-layout’类。此种方式创建的布局,规定了每块多大就是多大,不会改变。

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">  
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>  
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>  
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>  
</div>  
  1. 创建整个页面的布局。此种方式每块的大小可以随浏览器的改变而改变。
<body class="easyui-layout">  
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>  
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>  
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>  
</body>  

几个常用的属性:

title string 布局面板的标题。
region string 定义布局面板的位置(方向),可以取下列值的其中之一:north, south, east, west, center。 布局面板的方向。
split boolean 如果设置为true将显示一个分隔条,用户可以拖动分隔条来改变布局面板的尺寸。 边线加粗。

可伸缩面板手风琴

创建可伸缩面板使用html标签创建可伸缩面板,只须要对<div>标签引用’easyui-accordion’类。

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">  
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">  

    </div>  
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">  
        content2   
    </div>  
</div>  

常用属性

selected boolean 设置为true将默认展开面板。 不设置时默认展开的是第一个div。

选项卡

  1. 使用HTML标签创建选项卡
    使用HTML标签创建选项卡十分简单,不需要写任何javascript代码,只需要<div>标签引用’easyui-panel’类。每个选项卡面板都可以使用闭合的<div>标签对创建,使用方法跟创建控制面板一样。
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">  
    <div title="Tab1" style="padding:20px;display:none;">  
        tab1   
    </div>  
</div>  

几个常用的方法
add options 添加一个新的选项卡面板,options参数是一个可以配置的对象,查看选项卡控制面板属性获取更多信息。

// add a unselected tab panel
$('#tt').tabs('add',{
    title: 'new tab',
    selected: false
    //...
});

close which 关闭一个选项卡面板,title参数表示哪个选项卡将被关闭。
select which 选择一个选项卡面板。

了解了以上几个控件之后,运用其设计一个教务系统的首页。

首页的整体布局用布局面板,只运用north、center、west三部分,在west部分书写一个可伸缩的手风琴,在该手风琴的第一个div中添加一个用户管理的按钮,注意按钮调整宽度的方法并采用简洁化方式显示按钮。

<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height: 120px"  title="xxx管理系统">
<div><h1>教务管理系统</h1></div>
</div>
<div data-options="region:'west',split:true" style="width:160px" title="导航菜单">
<div id="aa" class="easyui-accordion" fit="true">  
    <div title="系统管理">  
      <a id="btn" href="#" class="easyui-linkbutton"  onclick="openTabs('用户管理','DataGrid.jsp')" plain="true" style="width: 100%" >用户管理</a>    
    </div>  
    <div title="学生管理" selected="true">    
    </div>  
     <div title="班级管理">    
    </div>  
     <div title="课程管理">    
    </div>  
     <div title="教师管理">        
    </div>  
</div> 
</div>
<div data-options="region:'center',split:true"  title="显示数据">
   <div id="tabs" class="easyui-tabs" fit="true">
   <div title="首页">
     <div align="center"><h3>欢迎XXX登录该系统</h3></div>
   </div>
   </div>
</div>  
</body>

点击按钮在页面布局的center中显示对应的页面,给对应的按钮添加一个点击事件,并在页面的头部添加事件,时间需要两个参数,一个是文本,一个是点击后跳转的链接,如果该文本代表的页面已经在center中出现,则将该页面显示出来,否则创建一个新的选项,并设置其中的几个属性title标题,closable:是否显示关闭按钮,content:自己编写好的内容其实就是跳转到哪里。

<script type="text/javascript">
function openTabs(text,url){
    if($("#tabs").tabs('exists',text)){
        $("#tabs").tabs('select',text);
    }else{  
        var mycontent= "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+ url + "></iframe>";
        $("#tabs").tabs('add',{
            title:text,
            closable:true,
            content:mycontent       
        });
    }
}           
</script>

在设置了这些之后生成的页面如下:

这里写图片描述

展开阅读全文

没有更多推荐了,返回首页