Asyui-layout

来自ling
跳转至: 导航搜索

asyui-layout div easyui-window div easyui-panel a easyui-linkbutton input/textarea easyui-validatebox ul easyui-tree table easyui-datagrid div easyui-tab div menu-sep a easyui-splitbutton div easyui-accordion select easyui-combobox select easyui-combotree body/div easyui-layout div easyui-menu a easyui-menubutton input easyui-numberbox timerSpan

用jeasy-ui的layout来布局时,一定要注意其写法,尤其嵌套布局时,容易出现错误。经过一阵子的使用,总结规则如下:

  1. class定义为“easyui-layout”的元素,必须要有style里的height设置(width可以忽略,缺省是100%)。也可以设置fit="true",意味着将宽高设为其父容器的宽高(一定要确保父容器有宽高值),设置fit后原来的宽高设置将失效。
  2. 带有region属性的元素,上一级容器必须是带easyui-layout的元素。两者层次有依赖性,中间不能再包裹其他容器元素。
  3. region为"north"和"south"的层,需要设置高度,宽度无所谓。同理,east和west需要设置宽度,高度可忽略。center的高宽不必设置,由layout计算得来。
  • BorderLayout通常有五个区域:east,west,north,south,center,下面是一般的用法:
  1. north区域用于显示页面的横幅
  2. south区域用于显示版权信息或其他说明
  3. west区域用于显示导航菜单
  4. east区域用于显示推广信息
  5. center区域用于显示主页面信息

collapsed: true 初始化的时候收起 在easyui中使用布局时首先应该确定在什么容器上应用布局,布局必须至少包含一个center区域,下面是一个例子:

<div class="layout-container" style="width:400px;height:300px;">  
    <div region="west" split="true" title="Navigator" style="width:150px;">  
        <p style="padding:5px;margin:0;">Select language:</p>  
        <ul>  
            <li><a href="javascript:void(0)" onclick="showpage('java.html')">Java</a></li>  
            <li><a href="javascript:void(0)" onclick="showpage('cshape.html')">C#</a></li>  
            <li><a href="javascript:void(0)" onclick="showpage('vb.html')">VB</a></li>  
            <li><a href="javascript:void(0)" onclick="showpage('erlang.html')">Erlang</a></li>  
        </ul>  
    </div>  
    <div id="content" region="center" title="Language" href="java.html" style="padding:5px;">  
    </div>  
</div>

我们在一个DIV容器上建立了一个左右分栏的布局,左边是导航菜单,右边是主页面内容。在center区域中我们使用href属性指定一个页面让其加载该页面的内容。 运行页面layout.html后可以看到下面的显示:

最后我们为导航菜单编写onclick事件处理函数用于加载指定页面的内容,这个函数很简单:

function showpage(url){  
    $('#content').load(url);  
或
function showcontent(language){
    $('#content').html('Introduction to ' + language + ' language');
}

1、layout以html标签方式建立的

<div id="content" region="center" border="false" class="easyui-layout">  
                      
                    <div id="divPage1"  
                        data-options="region:'west'"  
                        style="width: 150px;"></div>  
                    <div id="divPage2"  
                        data-options="region:'center',href:'${basePath}/userManage_main.jspx'"></div>  
                      
                </div>

这样,如果我想重新修改 div id="divPage1"这个layout的href属性,应该怎么实行? 实现方法:

$("#divPage1").panel({region:'west',href:'${basePath}/userManage_left.jspx?width='+width});  
$("#divPage1").panel('refresh');

必须执行panel的‘refresh’方法才会生效,因此这个‘userManage_left.jspx’页面会被执行2次。目前我的解决办法是使用js脚本建立的方式来解决。

2、用js脚本方式建立的 先建立一个div标签,用于生成layout。

<div id="content" />

js脚本创建

$('#content').layout('add',{     
                    region: 'west',     
                    width: 180,     
                    title: 'West Title',     
                    split: true,     
                    href:'${basePath}/userManage_left.jspx?width='+width,  
                    tools: [{     
                        iconCls:'icon-add',     
                        handler:function(){alert('add')}     
                    },{     
                        iconCls:'icon-remove',     
                        handler:function(){alert('remove')}     
                    }]     
                });  
                $('#content').layout('add',{     
                    region: 'center',     
                    width: 580,     
                    title: 'center Title',     
                    split: true,     
                    href:'${basePath}/userManage_main.jspx',  
                    tools: [{     
                        iconCls:'icon-add',     
                        handler:function(){alert('add')}     
                    },{     
                        iconCls:'icon-remove',     
                        handler:function(){alert('remove')}     
                    }]     
                });