easy ui layout
来源:互联网 发布:极速抢票软件 编辑:程序博客网 时间:2024/06/11 07:40
easyUI Layout
@author YHC
覆盖默认属性$.fn.layout.defaults
layout是一个容器,它有5个区域:north(北丐),south(南帝),east(东邪),west(西毒),center(中神通),像不像金庸的天龙八部,中间区域的panel是必须的,
周边区域panel是可选项,所有周边区域的panel可以改变大小通过拖动边框,他们也可以折叠(collapse)通过点击触发折叠事件,布局可以嵌套,因此用户
可以创建你想要的复杂布局;
使用示例
创建 Layout
1.通过标记创建layout.
记得添加"easyui-layout"样式给div标记.
<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>2.创建一个layout在整个页面.
<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>3.创建嵌套layout
注意那个west panel的内部的布局是折叠的.
<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的,所有内部区域panel提供内置支持通过"URL"异步加载内容,使用异步加载技术,用户可以是他们的layout页面显示快了很多.
<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>
折叠 Layout Panel
$('#cc').layout(); // 折叠west panel$('#cc').layout('collapse','west');
添加west 区域panel 工具按钮
$('#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')} }] });
Layout 选项
Region Panel 选项
region panel 选项 是定义在panel组件, 下面是一些常用和新增的属性:
方法
- easy ui layout
- jquery easy ui layout
- Easy Ui Layout控件
- jQuery Easy UI Layout(布局)组件
- easy ui layout 高度 宽度自适应浏览器
- easy-ui学习记录-layout布局
- easy-layout
- easy ui 之layout布局 用法小结(1)
- easy-ui
- Easy ui
- Easy UI
- ui.layout
- Easy ui Combobox,easy ui datagrid Combobox
- easyUI布局篇使用jquery easy UI的panel和layout实现界面的自适用窗口
- Jquery Easy UI
- Easy-Ui 学习笔记
- jquery easy ui 框架
- jQuery Easy UI 实例
- 之前没有发现的问题
- 游戏开发中的数学和物理算法(8):三角函数
- 游戏开发中的数学和物理算法(9):三角代数
- 2013-11-16
- 游戏开发中的数学和物理算法(10):矢量 vs 标量
- easy ui layout
- Vxlan基础理解
- 游戏开发中的数学和物理算法(11):极坐标 vs 笛卡尔坐标
- PHP中获取当前页面的完整URL
- 开启博客新纪元
- 游戏开发中的数学和物理算法(12):矢量的加减法
- 游戏开发中的数学和物理算法(13):点积和叉积
- 各种声音的基本频域成份介绍
- epoll实例