第十一章：Accordion（分類）組件
學習要點：
- 加載方式
- 容器屬性
- 事件列表
- 方法列表
- 面板屬性
一、加載方式：
1.class加載方式：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<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>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<div id="box" class="easyui-accordion" style="width:500px;height:300px;">
<div title="Accordion1">accordion1</div>
<div title="Accordion2">accordion2</div>
<div title="Accordion3">accordion3</div>
</div>
</html>
2.JS調用：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<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>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<div id="box">
<div title="Accordion1">accordion1</div>
<div title="Accordion2">accordion2</div>
<div title="Accordion3">accordion3</div>
</div>
</html>
$(function(){
$('#box').accordion({
});
});
二、容器屬性：
| Accordion容器屬性 | ||
|---|---|---|
| 屬性名 | 值 | 說明 |
| width | number | 分類容器的寬度。默認值爲auto。 |
| height | number | 分類容器的高度。默認值爲auto。 |
| fit | boolean | 如果設置爲true，分類容器大小將自適應父容器。默認值false。 |
| border | boolean | 定義是否顯示邊框，默認值爲true。 |
| animate | boolean | 定義在展開和摺疊的時候是否顯示動畫效果。默認值爲true。 |
| multiple | boolean | 如果爲true時，同時展開多個面板，默認值爲false。 |
| select | number | 設置初始化時，默認選中的面板索引號，默認值0。 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<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>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<div id="box" style="width:300px;height:200px;">
<div title="Accordion1">accordion1</div>
<div title="Accordion2">accordion2</div>
<div title="Accordion3">accordion3</div>
</div>
</html>
$(function(){
$('#box').accordion({
//width:500,
//height:300,
//fit:true,
//border:false,
//animate:false,
//multiple:true,
selected:1,
});
});
三、事件列表：
| Accordion事件 | ||
|---|---|---|
| 事件名 | 傳參 | 說明 |
| onSelect | title,index | 在面板被選中的時候觸發。 |
| onUnselect | title,index | 在面板被取消選中的時候觸發。 |
| onAdd | title,index | 在添加新面板的時候觸發。 |
| onAdd | title,index | 在添加新面板的時候觸發。 |
| onBeforeRemove | title,index | 在移除面板的之前觸發，返回false可以取消移除操作。 |
| onMove | title,index | 在面板被移除的時候觸發。 |
四、方法列表：
| Accordion方法 | ||
|---|---|---|
| 方法名 | 傳參 | 說明 |
| options | none | 返回分類組件的屬性 |
| panels | none | 獲取所有面板 |
| resize | none | 調整分類組件大小 |
| getSelect | none | 獲取選中的面板 |
| getSelections | none | 獲取所有選中的面板 |
| getPanel | which | 獲取指定的面板，'which'參數可以是面板標題或者索引。 |
| getPanelIndex | panel | 獲取指定面板的索引。 |
| select | which | 選擇指定面板，'which'參數可以是面板標題或者索引。 |
| unselect | which | 取消選擇指定面板，'which'參數可以是面板標題或者索引。 |
| add | options | 添加一個新面板，在默認情況下，新增的面板會變成當前面板，如果要添加一個非選中面板，不要忘記將'selected'屬性設置爲false。 |
| remove | which | 移除指定面板，'which'參數可以是面板標題或者索引。 |
五、面板屬性：
選項卡面板繼承了panel屬性，我們參考panel屬性即可，對分類的面板同樣有效。並且提供了新增的兩個屬性。
| Accordion面板新增屬性 | ||
|---|---|---|
| 方法名 | 參數 | 說明 |
| selected | boolean | 如果設置爲true將展開面板。 |
| collapsible | boolean | 如果設置爲true將顯示摺疊按鈕。 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<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>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<div id="box" style="width:300px;height:200px;">
<div title="Accordion1">accordion1</div>
<div title="Accordion2" id="a2">accordion2</div>
<div title="Accordion3">accordion3</div>
</div>
</html>
$(function(){
$('#box').accordion({
/*
onSelect:function(title,index){
alert(title + '|' + index);
},
onUnselect:function(title,index){
alert(title + '|' + index);
},
onAdd:function(title,index){
alert(title + '|' + index);
},
onBeforeRemove:function(title,index){
alert('before' + title + '|' + index);
},
onRemove:function(title,index){
alert('' + title + '|' + index);
},
*/
// }).hide();
});
//console.log($('#box').accordion('panels'));
/*
$(decumnet).click(function(){
$('#box').accrdion().show();
$('#box').accrdion('resize');
});
*/
//console.log($('#box').accordion('getSelected'));
/*
$('decument').click(function(){
console.log($('#box').accordion('getSelections'));
});
*/
//console.log($('#box').accordion('getPanel'),1);
//console.log($('#box').accordion('getPanelIndex'),'#a2');
//$('#box').accordion('select',1);
//$('#box').accordion('unselect',0);
/*
$('#box').accordion('add',{
title:'新面板',
colsable:true,
content:'新內容',
onClose:function(){
alert('close');
},
selected:false,
collapsible:false,
});
*/
//$('#box').accrodion('remove',0);
});
作者：Roger_CoderLife
鏈接：https://blog.csdn.net/Roger_CoderLife/article/details/102918862
本文根據網易雲課堂JQuery EasyUI視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載
