首页 > 代码库 > 关于EasyUI的Layout总结

关于EasyUI的Layout总结

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

[html] view plain copy print?
  1. <div id="content" region="center" border="false" class="easyui-layout">  
  2.                       
  3.                     <div id="divPage1"  
  4.                         data-options="region:‘west‘"  
  5.                         style="width: 150px;"></div>  
  6.                     <div id="divPage2"  
  7.                         data-options="region:‘center‘,href:‘${basePath}/userManage_main.jspx‘"></div>  
  8.                       
  9.                 </div>  


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

实现方法:

[javascript] view plain copy print?
  1. $("#divPage1").panel({region:‘west‘,href:‘${basePath}/userManage_left.jspx?width=‘+width});  
  2. $("#divPage1").panel(‘refresh‘);  


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

 

2、用js脚本方式建立的

先建立一个div标签,用于生成layout。

 

[html] view plain copy print?
  1. <div id="content" />  

 

js脚本创建

 

[javascript] view plain copy print?
    1. $(‘#content‘).layout(‘add‘,{     
    2.                     region: ‘west‘,     
    3.                     width: 180,     
    4.                     title: ‘West Title‘,     
    5.                     split: true,     
    6.                     href:‘${basePath}/userManage_left.jspx?width=‘+width,  
    7.                     tools: [{     
    8.                         iconCls:‘icon-add‘,     
    9.                         handler:function(){alert(‘add‘)}     
    10.                     },{     
    11.                         iconCls:‘icon-remove‘,     
    12.                         handler:function(){alert(‘remove‘)}     
    13.                     }]     
    14.                 });  
    15.                 $(‘#content‘).layout(‘add‘,{     
    16.                     region: ‘center‘,     
    17.                     width: 580,     
    18.                     title: ‘center Title‘,     
    19.                     split: true,     
    20.                     href:‘${basePath}/userManage_main.jspx‘,  
    21.                     tools: [{     
    22.                         iconCls:‘icon-add‘,     
    23.                         handler:function(){alert(‘add‘)}     
    24.                     },{     
    25.                         iconCls:‘icon-remove‘,     
    26.                         handler:function(){alert(‘remove‘)}     
    27.                     }]     
    28.                 }); 

关于EasyUI的Layout总结