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');
easyui layout
猜你喜欢
转载自chokee.iteye.com/blog/2268630
今日推荐
周排行