李炎恢_PHP_jQuery EasyUI[013] ~ Accordion(分類)組件 [Web Outlook菜單]

李炎恢_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:


執行結果:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *