Easyui05 accordion和layout组件

本文主要是介绍Easyui05 accordion和layout组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

手风琴样式列表框

<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>