easyui layout

chokee

浏览: 532385 次
性别:
来自: 广州

最近访客更多访客>>

wangyy

u012363178

wxyidea

xiaowangabc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

easyui

layout
$("#myLayOut").layout('panel','center').panel('setTitle','我的新标题')

////////////////////////

base:layout:docs
布局控件文档

1 快速开始
1.1 环境配置
1.2 入门示例
2 使用指引
2.1 编程式接口
2.1.1 初始化布局
2.1.2 收缩某个区域
2.1.3 展开某个区域
2.2 声明式标签式
3 开发指引
4 API
4.1 方法说明
4.1.1 Jquery对象.layout()
4.1.2 Jquery对象.layout().expand(region)
4.1.3 Jquery对象.layout().collapse(region)
4.2 属性说明
4.3 事件说明
4.3.1 onCollapse
4.3.2 onExpand
5 依赖项
6 更新日志

快速开始
环境配置
主题CSS引入
<link href="../../../../themes/default/ui.css" type="text/css" rel="stylesheet" />
jquery核心库文件引入
<script type="text/javascript" src="../../../../scripts/jquery/jquery.js"></script>
布局控件js引入
<script type="text/javascript" src="../jquery.panel.js"></script>
<script type="text/javascript" src="../jquery.resizable.js"></script>
<script type="text/javascript" src="../jquery.layout.js"></script>
布局控件CSS引入
<link href="../layout.css" type="text/css" rel="stylesheet" />
声明式标签JS引入
<script type="text/javascript"
        src="../../../../scripts/jquery_plugins/jquery.json.js"></script>
<script type="text/javascript"
        src="../../../../scripts/jquery_plugins/ui.widget.declarative.js"></script>
入门示例
1.新建一个静态html页面，将上面相关的CSS和JavaScript引入到页面中。
2.将以下HTML代码和JavaScript脚本copy到html页面。
<body class="widget-class" widget="layout">
   <div region="north" border="true" style="height:60px;">
       north region
   </div>
   <div region="west" split="true" title="West" style="width:150px;padding:10px;">
       west content
   </div>
   <div region="east" split="true" title="East" style="width:100px;padding:10px;">
       east region
   </div>
   <div region="south" border="true" style="height:50px;">
       south region
   </div>
   <div region="center" title="Main Title"></div>
</body>
3.访问该html页面，页面将成五部分的布局结构（东西南北中）。
使用指引
编程式接口
初始化布局
初始化布局
$('#cc').layout();
收缩某个区域
收缩某个区域
$('#cc').layout().collapse(region);
展开某个区域
展开某个区域
$('#cc').layout().expand(region);

声明式标签式
文件引入：
<script src="../../../../scripts/jquery_plugins/ui.widget.declarative.js"
        type="text/javascript"/>
<script src="../../../../scripts/jquery_plugins/jquery.json.js"
        type="text/javascript" />
标签定义：
<body class="widget-class" widget="layout">
<div region="north" border="true" style="height:60px;"></div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;"></div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;"></div>
<div region="south" border="true" style="height:50px;"></div>
<div region="center" title="Main Title"></div>
</body>
说明：
设置class的值:需要加上widget-class，标识该标签使用了UI控件，如果已经存在其他样式，则以逗号隔开。
设置widget扩展属性，该属性的值为控件的英文名，标识使用了哪个UI控件，按钮为“layout”。
div属性说明：

title : 字符串，区域的标题
region ：字符串，定义区域的位置，可选项有：north, south, east, west, center
border ：布尔值，True表示该区域要显示边界线
split ：布尔值，True表示该区域要显示出一条分隔拖动条，可以通过拖动分隔线改变区域的大小
icon ：字符串，定义该区域标题展示的图标，该值为图标的CSS
href : 字符串，通过该URL去远程获取数据
示例：
<body class="widget-class" widget="layout">
<div region="north" border="true" style="height:60px;">
      north region
</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">
      west content
</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">
      east region
</div>
<div region="south" border="true" style="height:50px;">
      south region
</div>
<div region="center" title="Main Title">
</div>
</body>
开发指引
add your content here.

API
方法说明
Jquery对象.layout()
说明：初始化布局。
Jquery对象.layout().expand(region)
说明：展开某个区域。
region可选项有:east、west、north、south、center
Jquery对象.layout().collapse(region)
说明：收缩某个区域。
region可选项有:east、west、north、south、center
属性说明
add content here.

事件说明
onCollapse
说明：当点击某个面板收缩时触发的事件。

Jquery对象.layout().getPanel(region).panel({
onCollapse:function(){
alert('collapse');
}
});
onExpand
说明：当点击某个面板展开时触发的事件。

Jquery对象.layout().getPanel(region).panel({
onExpand:function(){
alert('expand');
}
});
依赖项
更新日志

/////////////////////////
// 显示
$('#wrapdiv').layout('panel', 'east').panel({
'onCollapse' : function() {
var mywidth = $(window).width();
$('#wrapdiv').layout('panel', 'center').panel('resize', {
width : mywidth
});
$('#lowRecordListtb').datagrid('resize', {
width : mywidth-20
});
$('#wrapdiv').layout('collapse', 'east');

}
});

$('#wrapdiv').layout('expand', 'east');
$('#wrapdiv').layout('collapse', 'east');

分享到：