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');
分享到:
相关推荐
主要为大家详细介绍了jQuery布局组件EasyUI Layout的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
NULL 博文链接:https://cping.iteye.com/blog/2174449
jquery-Easyui引用与例子
esayui layout
easyui 扩展layout的方法,支持动态添加删除块
下面小编就为大家带来一篇JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jQuery EasyUI Layout实现tabs标签的实例 一、概述: 1、引入jquery.js与easyUi相关文件 2、效果如图: 二、创建Layout主页: <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib ...
本篇文章小编为大家介绍JQueryEasyUI Layout布局框架的使用,有需要的朋友可以参考一下
本文由脚本之家小编给大家介绍有关easyui-layout中的收缩层无法显示标题的原因分析及解决办法,感兴趣的朋友可以参考下
最近在把以前写的一个项目改成用easyui做前端。过程中遇到了不少问题。其中一个就是datagrid不能很好的布局。...这个时候就应该用 easyui-layout来分隔窗体来使具体的内容放在easyui-layout不同的部分。这样就能很好
问题:当把class=“easyui-layout”写在一个独立的div中时,layout的样式无法显示,也不报错。 例如: 代码如下: <span xss=removed><body > ”easyui-layout”> ”region:’north’,title:’North xss=...
jQuery EasyUI 中文API—Layout(Panel)
使用easyUI创建一个border layout在你的web页面 使用easyUI在panel中创建复杂布局 使用easyUI创建折叠面板 使用easyUI创建Tabs标签 使用easyui创建tabs组件和动态添加 使用easyUI创建一个自动播放的tabs ...