簡單介紹:
說明: Accordion摺疊面板基於Panel面板,但允許同時顯示一個或多個面板,每個面板都支持展開和摺疊內容可通過Ajax加載,如果沒有指定默認選中面板,則默認選中第一個面板.
基礎用法:
<div id="a" class="easyui-accordion" data-options="width:200,height:300"> <div style="padding:5px" data-options="title:'菜單一標題區',iconCls:'icon-ok'">菜單一內容區</div> <div style="padding:5px" data-options="title:'菜單一標題區',iconCls:'icon-ok',selected:true">菜單二內容區</div> <div style="padding:5px" data-options="title:'菜單一標題區',iconCls:'icon-ok'">菜單三內容區</div> </div>
異步加載:
<div id="a" class="easyui-accordion" data-options="width:200,height:300">
<div data-options="bodyCls:'accordion_padding',iconCls:'icon-ok',title:'簡單介紹'"></div>
<div data-options="bodyCls:'accordion_padding',iconCls:'icon-ok',title:'異步加載'"></div>
<div data-options="bodyCls:'accordion_padding',iconCls:'icon-ok',title:'容器屬性'"></div>
<div data-options="bodyCls:'accordion_padding',iconCls:'icon-ok',title:'容器事件'"></div>
<div data-options="bodyCls:'accordion_padding',iconCls:'icon-ok',title:'容器接口'"></div>
</div>
<!-- 說明: 加載jquery-easyui腳本文件 -->
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var options = {
onSelect: function(title, index){
var $p = $('#a').accordion('getPanel', index);
var panelOptions = {
href:'/easyui/data.json',
cache:false,
extractor: function(data){
var d = JSON.parse(data);
var r = d['menu'][index];
return r;
}
};
$p.panel(panelOptions);
}
};
$('#a').accordion(options);
</script>容器屬性:
width -> number
說明: 摺疊面板容器寬度
height -> number
說明: 摺疊面板容器高度
fit -> boolean
說明: 摺疊面板容器尺寸是否適應其父類容器尺寸
border -> boolean
說明: 摺疊面板是否顯示邊框
animate -> boolean
說明: 定義展開或摺疊是否顯示動畫
multiple -> boolean
說明: 定義是否可同時展開多個面板
selected -> number
說明: 初始化默認容器內選中的面板索引,從0開始
<div id="a" class="easyui-accordion" data-options="width:200,height:300,fit:false,animate:true,multiple:false,selected:0"> <div style="padding:5px" data-options="title:'菜單一標題區',iconCls:'icon-ok'">菜單一內容區</div> <div style="padding:5px" data-options="title:'菜單一標題區',iconCls:'icon-ok'">菜單二內容區</div> <div style="padding:5px" data-options="title:'菜單一標題區',iconCls:'icon-ok'">菜單三內容區</div> </div>
面板屬性:
selected -> boolean
說明: 設置是否展開面板
collapsible -> boolean
說明: 設置是否顯示可摺疊按鈕
容器事件:
onSelect -> function
說明: 當面板被選中時觸發,回調函數必須接收title和index參數
onUnselect -> function
說明: 當面板未選中時觸發,回調函數必須接收title和index參數
onAdd -> function
說明: 當添加新面板後觸發,回調函數必須接收title和index參數
onBeforeRemove -> function
說明: 當移除一面板前觸發,回調函數必須接收title和index參數,返回False將不移除
onRemove -> function
說明: 當移除一面板後觸發
<div id="a" class="easyui-accordion" data-options="width:200,height:300,onUnselect:function(title,index){console.log(title, index)}">
<div style="padding:5px" data-options="title:'菜單一標題區',iconCls:'icon-ok',selected:true,collapsible:true">菜單一內容區</div>
<div style="padding:5px" data-options="title:'菜單二標題區',iconCls:'icon-ok'">菜單二內容區</div>
<div style="padding:5px" data-options="title:'菜單三標題區',iconCls:'icon-ok'">菜單三內容區</div>
</div>
<!-- 說明: 加載jquery-easyui腳本文件 -->
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var oldTitle = '';
var options = {
onSelect: function(title, index){
var $p = $('#a').accordion('getPanel', index);
oldTitle = title;
var newTitle = title + ' [已選中] ';
$p.panel('setTitle', newTitle);
},
onUnselect: function(title, index){
var $p = $('#a').accordion('getPanel', index);
$p.panel('setTitle', oldTitle?oldTitle:title);
}
};
var $accordion = $('#a').accordion(options)
</script>容器接口:
options -> object
說明: 返回摺疊面板的選項.
panels ->array
說明: 返回所有的面板對象
resize -> none
說明: 設置摺疊面板的尺寸,需要傳入包含width/height/left/top的對象
getSelected -> object
說明: 獲取摺疊面板中選中面板對象,可調用其panel屬性來調用panel面板接口
getSelections -> array
說明: 獲取過去所有選中的面板,主要是配合容器的multiple屬性多選.
getPanel -> object
說明: 獲取摺疊面板中指定的面板對象,需要接收title或index的值,可調用其panel屬性來調用panel面板接口
getPanelIndex -> number
說明: 獲取指定面板索引,需要接收panel對象
select -> none
說明: 選中指定的面板,並展開內容,需要接收面板title或index的值
unselect -> none
說明: 取消選中指定的面板,並收縮內容,需要接收面板title或index的值
add -> none
說明: 添加指定面板,需要接收面板options
remove -> none
說明: 移除指定面板,需要接收面板title或index的值
<div>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#a').accordion('options'))">獲取選項</a>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#a').accordion('panels'))">獲取面板</a>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#a').accordion('resize', {width:300,height:200})">改變尺寸</a>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#a').accordion('getSelected'))">獲取選中</a>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#a').accordion('getSelections'))">過去選中</a>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#a').accordion('getPanel', 0).panel('header').text())">面板標題</a>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#a').accordion('getPanelIndex', $('#a').accordion('getSelected')))">面板索引</a>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#a').accordion('select', $('#a').accordion('panels').length-1))">選中最後</a>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#a').accordion('unselect', $('#a').accordion('panels').length-1))">取消選中</a>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#a').accordion('add', {
iconCls: 'icon-ok',
title: '新菜單',
content: '新菜單內容區',
bodyCls: 'accordion_padding'
}))">添加面板</a>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#a').accordion('remove', $('#a').accordion('panels').length-1))">刪除面板</a>
</div>
<hr>
<div id="a" class="easyui-accordion" data-options="width:200,height:300,onUnselect:function(title,index){console.log(title, index)}">
<div style="padding:5px" data-options="title:'菜單一標題區',iconCls:'icon-ok',selected:true,collapsible:true">菜單一內容區</div>
<div style="padding:5px" data-options="title:'菜單二標題區',iconCls:'icon-ok'">菜單二內容區</div>
<div style="padding:5px" data-options="title:'菜單三標題區',iconCls:'icon-ok'">菜單三內容區</div>
</div>