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方法刪除這個格子。