这一篇中我们将看看如何给手风琴动态的增加，删除格子，怎样选择某一个格子的。
1.先看看引用的资源
<link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" /> <link rel="stylesheet" href="jquery-easyui-1.3.5/demo/demo.css" /> <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
2.下面是html
<div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>Click the buttons below to add or remove accordion items.</div> </div> <div style="margin: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" class="easyui-accordion" style="width:500px;height:300px"> <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>
这个就一个定义class="easyui-accordion"
3.注意这里有三个按钮实现选择，新增，删除手风琴的格子的功能，下面看看这些js方法是什么样子的
<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>
选中某一格的方法是
function
selectPanel(){
$.messager.prompt("Prompt",‘Please enter the panel
title:‘,function(s){
if(s){
$("#aa").accordion(‘select‘,s);
}
});
}
这里先弹出对话框填入关键字，然后根据关键字搜索，搜索的内容是Title，注意这里是全字匹配，成功后就选中这一格，效果如下：
添加一格的方法是
var idx=1; function addPanel(){ $("#aa").accordion("add",{ title:"Title"+idx, content:‘<div style="padding:10px">Content‘+idx+‘</div>‘ }); idx++; }
这里添加方法关键字“add”，然后一个json对象{ title:"Title"+idx,content:‘<div style="padding:10px">Content‘+idx+‘</div>‘ }，对象里面就两个属性，一个title，一个content。
删除一个格子的方法是
var pp = $("#aa").accordion(‘getSelected‘); if(pp){ var index = $("#aa").accordion(‘getPanelIndex‘,pp); $("#aa").accordion(‘remove‘,index); }
这个方法首先获取选择当前手风琴被选中的格子的index，然后调用remove方法删除这个格子。