jQuery EasyUI Accordion可伸縮面板組件使用詳解

2019-11-19 17:23:18

字體：大中小

來源：轉載

供稿：網友

Accordion 可伸縮面板組件，基于panel，示例如下：

<!doctype html> <html lang="en">  <head>  <meta charset="UTF-8">  <script type="text/javascript" src="easyui/jquery.min.js"></script>  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>  <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>  <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/panel.css" rel="external nofollow" />  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" />  <title>Document</title>   <script>   $(function(){    $('#ac').accordion({      //面板屬性     animate:true, //定義展開和折疊的時候是否顯示動畫效果     width:600,  //面板寬度     height:200,  //面板高度     fit :false,  //自適應父容器 默認false 在此例中就是瀏覽器，設置為true面板會鋪滿瀏覽器     border:true, //是否顯示邊框     multiple:false, //是否可以同時展示多個面板1.3.5可用     selected:0,  //設置默認展開的順序號      //面板操作觸發事件          //面板被選中時觸發事件     onSelect:function(title,index){      //alert(title+':'+index)     }     //onUnselect     //onAdd     //onBeforeRemove     //onRemove      //組件的方法      });     /**下面是accordion組件提供的一系列可調用的方法*/    //alert($("ac").accordion("options").width)//獲取組件對象的某個屬性    var panels = $("#ac").accordion("panels");//返回的是panel數組,即每一個單獨面板,可以應用panel的屬性    //alert(panels[0].panel('options').width);    $("#ac").accordion("resize"); //調整面板大小    var selectedPanel=$("#ac").accordion("getSelected");//獲取選中的面板    var selectedPanels=$("#ac").accordion("getSelections");//獲取所有選中的面板    var panel=$("#ac").accordion("getPanel",2);//獲取指定的面板，參數可以是面板編號和面板tatle            var index = $('#ac').accordion('getPanelIndex', selectedPanel);//獲取指定面板在accordion中的索引 ，參數是某個panel     $("#ac").accordion("select",2);//指定被選中的面板 參數是面板編號或者title    $("#ac").accordion("unselect",1);//跟上一個方法相對應        //添加一個新的面板,為新面板指定屬性    $('#ac').accordion('add', {     title: '新標題',     content: '新內容',     selected: false    });        $("#ac").accordion("remove",1)//移除一個面板，參數是面板編號或者title        })  </script>  </head>  <body> <div id="ac" >  <div title="Title1" iconCls="icon-save" style="overflow:auto;padding:10px;">    </div>  <div title="Title2" iconCls="icon-reload" split:true " style="padding:10px;">     </div>  <div title="Title3" iconCls="icon-edit">     </div> </div>  </body> </html>

效果圖：