李炎恢_PHP_jQuery EasyUI[013] ~ Accordion(分類)組件 [Web Outlook菜單]
李炎恢_PHP_jQuery EasyUI[013] ~ Accordion(分類)組件 [Web Outlook菜單]
參考資料: https://github.com/jash-git/jash-WebSI
GITHUB: https://github.com/jash-git/richie_jQuery_EasyUI
My code:
$(function () {
$('#box').accordion({
//width : 500,
//height : 300,
//fit : true,
//border : false,
//animate : false,
//multiple : true,
//selected : 1,
/*
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);
},
*/
})
//console.log($('#box').accordion('panels'));
//console.log($('#box').accordion('panels'));
/*
$(document).click(function () {
$('#box').accordion().show();
$('#box').accordion('resize');
});
//console.log($('#box').accordion('getSelected'));
$(document).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 : '新面板',
closable : true,
content : '新内容',
onClose : function () {
alert('close');
},
//selected : false,
//collapsible : false,
});
*/
//$('#box').accordion('remove', 0);//移除第一個選單
});
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="../../easyui_15/jquery.min.js"></script> <script type="text/javascript" src="../../easyui_15/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../easyui_15/locale/easyui-lang-zh_TW.js" ></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/icon.css" /> </head> <body> <!-- <div id="box" class="easyui-accordion" style="width:300px;height:200px;"> <div title="accordion1">accordion1</div> <div title="accordion2">accordion2</div> <div title="accordion3">accordion3</div> </div> --> <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> </body> </html>
PDF:
執行結果:
