EasyUI之Layout布局

EasyUI之Layout布局

Layout布局，是按照上北，下南，左西右东，center居中的布局方式。主要属性：region设置布局的方向，style设置样式,title设置标题

依赖

• panel
• resizable

用法示例

​创建 Layout​

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

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

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

. ​<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 Panel​

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

2. // 折叠 west panel

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

Layout Panel 选项

方法

<div id="tt" class="easyui-tabs" fit=true style="width:500px;height:250px;">  
      <div title="信用卡" style="padding:20px;display:none;"style="width:500px;height:250px;">  
            信用卡各中心信息
      </div>  
      <div title="白金卡" closable="true" style="overflow:auto;padding:20px;display:none;">  
            白金卡信息
      </div>  
      <div title="借记卡" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">  
            借记卡中心
      </div>  
  </div>

Accordion 手风琴

依赖

• panel

用法示例

​创建 Accordion​

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

<div id="aa" class="easyui-accordion"  style="width:00px;height:200px;">  
        <div title="后台管理"  style="overflow:auto;padding:10px;"iconCls="icon-tip">  
            <h style="color:#0099FF;">个人资料信息管理</h>  
            <p>理财专家、互联网金融</p>  
        </div>  
        <div title="贷款"  selected="true" style="padding:10px;">  
                贷款   
        </div>  
        <div title="存款">  
                 存款   
    </div>  
</div>

容器选项

Panel 选项

Accordion 的 panel 选项承自 panel，下面是增加的特性：

事件

方法