<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入easyui -->
<link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="easyui/themes/default/easyui.css"
type="text/css"></link>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="aa" class="easyui-accordion"
style="width: 300px; height: 200px;">
<div title="Title1" data-options="iconCls:'icon-save'"
style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets
you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true"
style="padding: 10px;">content2</div>
<div title="Title3">
content3
</div>
<input type="button" onclick="add()" value="添加新面板"/>
</div>
<script type="text/javascript">
$(function(){
/* 新添加一个新面板后触发 */
$("#aa").accordion({
onAdd:function(title,index){
alert(title+" and "+index)
}
});
/* 选择一个新面板后触发 */
$("#aa").accordion({
onSelect:function(title,index){
/* 再调用容器的options方法 */
var options = $("#aa").accordion('options');
alert("options.fit："+options.fit+ " options.animate：" +options.animate)
}
});
})
/* 这是不段javascript代码，请放在jquery初始方法外 */
function add(){
$("#aa").accordion('add',{
title: '新标题',
content: '新内容',
selected: false
});
}
</script>
</body>
</html>
Paste_Image.png
Paste_Image.png
accordion.gif
网友评论