easyui---accordion(手风琴)

首先配置好easyui环境

1.ACCORDION(手风琴)

class:class=easyui-accordion,
事件:
查找:
　　function selectPanel(){ //会弹出输入框 s为自动获取输入的值
　　　　$.messager.prompt('Prompt','Please enter the panel title:',function(s){
　　　　if (s){
　　　　　　$('#aa').accordion('select',s); //#aa要操作的大容器
　　　　　　}
　　　　});
　　}
添加:
　　var idx = 1;
　　function addPanel(){
　　　　$('#aa').accordion('add',{ //#aa要操作的大容器
　　　　title:'Title'+idx,
　　　　content:'<div style="padding:10px">Content'+idx+'</div>' //content添加的内容,title标题
　　　　});
　　　　idx++;
　　}
删除:
　　function removePanel(){
　　　　var pp = $('#aa').accordion('getSelected'); //pp获取当前选中对象
　　　　if (pp){
　　　　　　var index = $('#aa').accordion('getPanelIndex',pp); //index获取当前选中对象的索引
　　　　　　$('#aa').accordion('remove',index);
　　　　}
　　}
Ajax嵌套页面:data-options="href:'ajax.html'" //ajax.html页面路径

树状图:

　　　　<ul class="easyui-tree">
　　　　　　这里面写ul---li
　　　　</ul>
内部 data-options="collapsed:false" //防止折叠

2.例子：

<div style="margin:20px 0 10px 0;">
　　<a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectPanel()">Select</a>
　　<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">Add</a>
　　<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">Remove</a>
</div>
<div id="aa" data-options="multiple:true" class="easyui-accordion" style="width:500px;height:500px;"><!--data-options="multiple:true"启用多个面板-->

　　<div title="Top Panel" data-options="iconCls:'icon-search',collapsed:false,collapsible:false" style="padding:10px;"><!--collapsed:false不可折叠-->
　　　　<input class="easyui-searchbox" prompt="Enter something here" style="width:300px;height:25px;">
　　</div>
　　<div title="About" data-options="iconCls:'icon-ok'" 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="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;" >
　　　　<h3>Accordion for jQuery>sd</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>
　　</div>
　　<div title="Ajax" data-options="href:'_content.html'" style="padding:10px">
　　</div>
　　<div title="树">
　　　　<ul class="easyui-tree">
　　　　　　<li>
　　　　　　　　<ul>
　　　　　　　　　　<li>666</li>
　　　　　　　　</ul>
　　　　　　</li>
　　　　　　<li>132</li>
　　　　　　<li>132</li>
　　　　</ul>
　　</div>
　　<div title="数据" data-options="
　　　　selected:true,
　　　　tools:[{
　　　　iconCls:'icon-reload',
　　　　handler:function(){
　　　　　　$('#dg').datagrid('reload');
　　　　}
　　}]">
　　<table id="dg" class="easyui-datagrid"
　　　　data-options="url:'datagrid_data1.json',method:'get',fit:true,fitColumns:true,singleSelect:true">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th data-options="field:'itemid',width:80">Item ID</th>
　　　　　　　　<th data-options="field:'productid',width:100">Product ID</th>
　　　　　　　　<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
　　　　　　　　<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
　　　　　　　　<th data-options="field:'attr1',width:150">Attribute</th>
　　　　　　　　<th data-options="field:'status',width:50,align:'center'">Status</th>
　　　　　　</tr>
　　　　</thead>
　　　</table>
　　</div>

</div>

<script type="text/javascript">
function selectPanel(){
$.messager.prompt('Prompt','Please enter the panel title:',function(s){
if (s){
$('#aa').accordion('select',s);
}
});
}
var idx = 1;
function addPanel(){
$('#aa').accordion('add',{
title:'Title'+idx,
content:'<div style="padding:10px">Content'+idx+'</div>'
});
idx++;
}
function removePanel(){
var pp = $('#aa').accordion('getSelected');
if (pp){
var index = $('#aa').accordion('getPanelIndex',pp);
$('#aa').accordion('remove',index);
}
}
</script>

启用可多个面板:data-options="multiple:true"

效果图: