欢迎访问 licqi IT技术
我们一直在努力

网站前端_EasyUI.基础入门.0008.带你玩转jQuery EasyUI Layout组件?

简单介绍:


说明: ($.fn.layout)布局,依赖panel和resizable,默认分为5个区东east,西west,南south,北north,中center,中间的区域面板是必须的,边缘区域面板是可选的,每个边缘区域面板可通过拖拽边框调整尺寸,也可以通过点击折叠触发器来折叠面板.布局可嵌套,因此用户可建立复杂的布局.

基础用法:


body { padding: 0; margin: 0; } var width = $(document).width(); var height = $(document).height(); $('#l').layout({ width: width, height: height, });

布局属性:


fit -> boolean

说明: 当设置为true时,就设置布局的尺寸适应它的父容器,当在body标签上创建布局时,它将自动最大化到整个页面的全部尺寸


    

布局接口:


resize -> function

说明: 设置面板尺寸并且做布局,需要传入包含width/height/left/top的对象

panel -> function

说明: 返回指定面板,需要传递region参数,参数支持north,south,east,west,center

collapse -> function

说明: 折叠指定的面板,需要传递region参数,参数支持north,south,east,west,center

expand -> function

说明: 展开指定的面板,需要传递region参数,参数支持north,south,east,west,center

add -> function

说明: 添加一个指定的面板,options参数一个配置对象

remove -> function

说明: 移除指定的面板,需要传递region参数,参数支持north,south,east,west,center


    
操作区 左侧加载远程数据 左侧面板缓慢合并 左侧面板缓慢展开 删除中间左边面板 添加中间左边面板
function westLoad(that) { var $wpanel = $('body').layout('panel', 'west'); $wpanel.panel({ extractor: function(data){ var h = ''; return h; }, }); $wpanel.panel('refresh', '/easyui/data.json'); }; function westCollapse(that){ $('body').layout('collapse', 'west'); }; function westExpand(that){ $('body').layout('expand', 'west'); }; function centerRemove(that){ $('#ll').layout('remove', 'west'); }; function centerAdd(that){ $('#ll').layout('add', {region:'west',title:'sub west title',width:200}) };

面板扩展:


title -> string

说明: 布局面板的标题文本.

region -> string

说明: 定义布局面板的位置,其值可以为north,south,east,west,center

border -> boolean

说明: 当设置为true时,就显示布局面板的边框

split -> boolean

说明: 当设置为true时,就显示拆分栏,用户可以改变面板的尺寸.

iconCls -> string

说明: 当面板头部显示一个图表的css class

href -> string

说明: 从远程站点加载数据的url

collapsible -> boolean

说明: 定义是否显示可折叠按钮.

minWidth -> number

说明: 面板的最小宽度

maxWidth -> number

说明: 面板的最大宽度

minHeigit -> number

说明: 面板的最小高度

maxHeight -> number

说明: 面板的最大高度

赞(0) 打赏
未经允许不得转载:licqi IT技术 » 网站前端_EasyUI.基础入门.0008.带你玩转jQuery EasyUI Layout组件?
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏