easyui框架layout控件的使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了easyui框架layout控件的使用相关的知识，希望对你有一定的参考价值。
1、通过标记创建布局（Layout）。
添加 ‘easyui-layout‘ class 到 <div> 标记。
1 <div id="cc" class="easyui-layout" style="width:600px;height:400px;">
2 <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>
3 <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>
4 <div data-options="region:‘east‘,title:‘East‘,split:true" style="width:100px;"></div>
5 <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>
6 <div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div>
7 </div>
2、在整个页面上创建布局（Layout）。
1 <body class="easyui-layout">
2 <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>
3 <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>
4 <div data-options="region:‘east‘,title:‘East‘,split:true" style="width:100px;"></div>
5 <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>
6 <div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div>
7 </body>
3、创建嵌套布局。
请注意，内部布局的西区面板是折叠的。
<body class="easyui-layout"> <div data-options="region:‘north‘" style="height:100px"></div> <div data-options="region:‘center‘"> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:‘west‘,collapsed:true" style="width:180px"></div> <div data-options="region:‘center‘"></div> </div> </div> </body>
4、通过 ajax 加载内容。
布局（layout）是基于面板（panel）创建的。各区域面板提供从 URL 动态加载内容的内建支持。使用动态加载技术，用户可以让他们的布局页面更快地显示。
<body class="easyui-layout">
<div data-options="region:‘west‘,href:‘west_content.php‘" style="width:180px" ></div>
<div data-options="region:‘center‘,href:‘center_content.php‘" ></div> </body>
折叠布局面板（Collpase Layout Panel）
$(‘#cc‘).layout(); // collapse the west panel $(‘#cc‘).layout(‘collapse‘,‘west‘);
通过工具按钮添加西区面板
$(‘#cc‘).layout(‘add‘,{
region: ‘west‘,
width: 180,
title: ‘West Title‘,
split: true,
tools: [{
iconCls:‘icon-add‘,
handler:function(){alert(‘add‘)}
},{
iconCls:‘icon-remove‘,
handler:function(){alert(‘remove‘)}
}]
});
aa
以上是关于easyui框架layout控件的使用的主要内容，如果未能解决你的问题，请参考以下文章
使用easyui框架form控件，单选按钮radio或复选框checkbox样式问题
转--基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用