jQuery EasyUI API 中文文档 - 布局(Layout)

Layout  布局

风流涕淌 翻译。不当之处,敬请指正。转载请保留出处!

 

依赖

  • panel
  • resizable

用法示例

创建 Layout

经由标记创建 Layout 。添加 'easyui-layout' 类到 <div/> 标记。

1.  <div id="cc" class="easyui-layout" style="width:600px;height:400px;">  

2.      <div region="north" title="North Title" split="true" style="height:100px;"></div>  

3.      <div region="south" title="South Title" split="true" style="height:100px;"></div>  

4.      <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>  

5.      <div region="west" split="true" title="West" style="width:100px;"></div>  

6.      <div region="center" title="center title" style="padding:5px;background:#eee;"></div>  

7.  </div>  

在整个页面上创建 Layout

1.  <body class="easyui-layout">  

2.      <div region="north" title="North Title" split="true" style="height:100px;"></div>  

3.      <div region="south" title="South Title" split="true" style="height:100px;"></div>  

4.      <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>  

5.      <div region="west" split="true" title="West" style="width:100px;"></div>  

6.      <div region="center" title="center title" style="padding:5px;background:#eee;"></div>  

7.  </body>  

折叠 Layout Panel

1.  $('#cc').layout();   

2.  // 折叠 west panel   

3.  $('#cc').layout('collapse','west');  

 

Layout Panel 选项

名称

类型

说明

默认值

title

string

Layout panel 的标题文字。

null

region

string

定义 layout panel 的位置,其值是下列之一:northsoutheastwestcenter

 

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'



    风流涕淌 翻译。不当之处,敬请指正。转载请保留出处!

 

posted @   风流涕淌  阅读(80487)  评论(7编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示