溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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" >
</div>
<div title="Title2" iconCls="icon-reload" split:true " >
</div>
<div title="Title3" iconCls="icon-edit">
</div>
</div>
</body>
</html>
效果圖：
點此下載源代碼：Accordion可伸縮面板組件
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
