1.前言.
easy ui有两种布局,一种是在div上面布局,一种是直接body全局布局,一般div布局用得比较多。本文主要参照http://www.cnblogs.com/Philoo/archive/2011/10/01/jeasyui_api_layout.html。
2.布局实现方法 。
依赖•panel•resizable用法示例创建 Layout
经由标记创建 Layout 。添加 'easyui-layout' 类到 <div/> 标记。
<div id="cc" class="easyui-layout" style="width:600px;height:400px;"> <div region="north" title="North Title" split="true" style="height:100px;"></div>
<div region="south" title="South Title" split="true" style="height:100px;"></div>
<div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>
<div region="west" split="true" title="West" style="width:100px;"></div>
<div region="center" title="center title" style="padding:5px;background:#eee;"></div>
</div>
在整个页面上创建 Layout。
<body class="easyui-layout">
<div region="north" title="North Title" split="true" style="height:100px;"></div>
<div region="south" title="South Title" split="true" style="height:100px;"></div>
<div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>
<div region="west" split="true" title="West" style="width:100px;"></div>
<div region="center" title="center title" style="padding:5px;background:#eee;"></div>
</body>
折叠 Layout Panel
$('#cc').layout();
// 折叠 west panel
$('#cc').layout('collapse','west');
3.参数的解释.
Layout Panel 选项名称
类型
说明
默认值
title
string
Layout panel 的标题文字。
null
region
string
定义 layout panel 的位置,其值是下列之一:north、south、east、west、center。
border
boolean
True 就显示 layout panel 的边框。
true
split
boolean
True 就显示拆分栏,用户可以用它改变panel 的尺寸。
false
iconCls
string
在panel 头部显示一个图标的CSS 类。
null
href
string
从远程站点加载数据的 URL 。
null
方法名称
参数
说明
resize
none
设置 layout 的尺寸。
panel
region
返回指定的 panel,'region' 参数可能的值是:'north'、'south'、'east'、'west'、'center'。
collapse
region
折叠指定的 panel,'region' 参数可能的值是:'north'、'south'、'east'、'west'。
expand
region
展开指定的 panel,'region' 参数可能的值是:'north'、'south'、'east'、'west'。
本文转自:http://www.cnblogs.com/Philoo/archive/2011/10/01/jeasyui_api_layout.html
分享到:
相关推荐
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
jquery-easy-ui-1.3.2
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...
${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.css" > ${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"> ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"> ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-...
jquery-ui.css、jquery-ui.js
jquery-ui-1.8.2.custom.min.js,jquery-ui-1.8.4.custom.css
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
jquery-easy-ui 各种demo 例如tree,
jquery插件jquery-ui-1.8.18.custom.min.js
jquery-ui-1.8.18.custom
很好用的jquery-easy-ui demo
jquery-ui-1.9.2.custom.min.js
jqueryUi-181107亲测可用,对应jquery-ui.min.js文件。
jquery-ui-1.7.3.custom JQUERY UI
jquery-ui+jquery-ui-rails
jquery-ui.css
jquery-ui-1.7.3.custom 完整开发包
jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载
jquery-1.11.0 + jquery-UI-1.10.4