Easyui05 accordion和layout组件

手风琴样式列表框

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">   

    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
        content1   
    </div>    

</div>

//js方式动态添加accordion,必须设置selected:false.否则默认会被选中.

$(function(){
$("#aa").accordion("add",{
title:"删除面板",
content:"要删除的内容模块",

selected:false

})

 //点击链接,添加选项卡

$(".menu_a").click(function(){
var title=$(this).text();
var url=$(this).attr("url");
if($("#tt").tabs("exists",title)){
$("#tt").tabs("select",title)
}else{
$("#tt").tabs("add",{
title:title,
content:"<iframe src='"+url+"' style='width:100%;height:100%;border:0'></ifame>",
closable:true
})
}
})

})

Layout布局界面

fit:true自适应父节点大小.split可进行拖动

<div id="cc" class="easyui-layout" data-options="fit:true">   
    <div data-options="region:'north'" style="height:100px;">
    <h1>后台管理页面</h1>
    </div>   
    <div data-options="region:'south'" style="height:100px;">
    <h1>版权声明</h1>
    </div>      
    <div data-options="region:'west',title:'West'" style="width:150px;">
    <div id="aa" class="easyui-accordion" data-option="fit:true">   
    <div title="java" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
        <a href="javascript:;" class="menu_a">商品详情页面</a>  
    </div>   
    <div title="c++" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   
        <a href="javascript:;" class="menu_a">用户列表页面</a>     
    </div>   
    <div title="php" data-options="iconCls:'icon-man'">   
        <a href="javascript:;" class="menu_a">订单列表页面</a>     
    </div>
    </div>
    </div>   
    <div data-options="region:'center'" style="background:#eee;">
    <div id="tt" class="easyui-tabs" data-options="fit:true">   
        <div title="欢迎界面" style="padding:20px;" data-options="closable:true">   
                     欢迎您 
         </div>                 
        </div> 
    </div>   
</div>