easyui学习笔记9—手风琴格子的增，删和选择

这一篇中我们将看看如何给手风琴动态的增加，删除格子，怎样选择某一个格子的。

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方法删除这个格子。