EasyUI(四)布局

最新推荐文章于 2024-05-25 15:41:54 发布

皮娃娃

最新推荐文章于 2024-05-25 15:41:54 发布

阅读量536

点赞数

分类专栏： easyui 文章标签： easyui

本文链接：https://blog.csdn.net/qi325/article/details/77450011

版权

easyui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

为什么要布局

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

布局面板

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

创建布局面板

使用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>

创建整个页面的布局。此种方式每块的大小可以随浏览器的改变而改变。

<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。

选项卡

使用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>