EasyuiAPI：布局

一、Panel（面板）

1.通过标签创建：

<div id="p" class="easyui-panel" title="My Panel"style="width:500px;height:150px;padding:10px;background:#fafafa;"data-options="iconCls:‘icon-save‘,closable:true,collapsible:true,minimizable:true,maximizable:true">
    <p>panel content.</p>
    <p>panel content.</p>
</div>  

2.通过JS调用：

　　html代码：

<div id="p" style="padding:10px;">
    <p>panel content.</p>
    <p>panel content.</p>
</div> 

　　JS代码：

$(‘#p‘).panel({
  width:500,
  height:150,
  title: ‘My Panel‘,
  tools: [{
    iconCls:‘icon-add‘,
    handler:function(){alert(‘new‘)}
  },{
    iconCls:‘icon-save‘,
    handler:function(){alert(‘save‘)}
  }]
});  

二、Tabs（选项卡）

1.通过标签创建：

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <div title="Tab1" style="padding:20px;display:none;">
        tab1
    </div>
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
        tab2
    </div>
    <div title="Tab3" data-options="iconCls:‘icon-reload‘,closable:true" style="padding:20px;display:none;">
        tab3
    </div>
</div>  

2.通过JS调用：

　　html代码：

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"></div>

　　JS代码：

$(‘#tt‘).tabs({
    border:false,
    onSelect:function(title){
        alert(title+‘ is selected‘);
    }
});

　　添加一个选项卡：

$(‘#tt‘).tabs(‘add‘,{
    title:‘New Tab‘,
    content:‘Tab Body‘,
    closable:true,
    tools:[{
        iconCls:‘icon-mini-refresh‘,
        handler:function(){
            alert(‘refresh‘);
        }
    }]
});

三、Accordion（分类）

1.通过标签创建：

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:‘icon-save‘" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery.
        It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:‘icon-reload‘,selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>  

四、Layout（布局）

1.通过标签创建：

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>
    <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>
    <div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div>
    <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>
    <div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div>
</div>  

2.通过JS调用：

//创建西侧面板

$(‘#cc‘).layout(‘add‘,{
    region: ‘west‘,
    width: 180,
    title: ‘West Title‘,
    split: true,
    tools: [{
        iconCls:‘icon-add‘,
        handler:function(){alert(‘add‘)}
    },{
        iconCls:‘icon-remove‘,
        handler:function(){alert(‘remove‘)}
    }]
});