<html>
<head>
<script src="jquery-easyui/jquery.min.js"></script>
<script src="jquery-easyui/jquery.easyui.min.js"></script>
<script src="jquery-easyui/easyloader.js"></script>
<script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css" />
</head>
<body>
<!--
accordion的属性
width:可伸缩面板所在容器的宽度
<div class="easyui-accordion" data-options="200">
<div title="Title1" ></div>
</div>
height:可伸缩面板所在容器的高度
<div class="easyui-accordion" data-options="height:200">
<div title="Title1" ></div>
</div>
fit:铺满整个屏幕
<div class="easyui-accordion" data-options="fit:true">
<div title="Title1" ></div>
</div>
border:为false时不显示边框,相反则显示,默认是true
<div class="easyui-accordion" data-options="border:true">
<div title="Title1" ></div>
</div>
animate:为false时没有折叠的动画效果,相反有动画效果,默认是true
<div class="easyui-accordion" data-options="animate:true">
<div title="Title1" ></div>
</div>
可伸缩面板属性
selected:为true时,默认展开这个面板,相反是第一个默认展开,默认是false
<div class="easyui-accordion" data-options="200,height:200">
<div title="Title1" ></div>
<div title="Title2" selected=true></div>
</div>
accordion的事件
onSelect:当一个可伸缩面板被选择时触发。
<div class="easyui-accordion" data-options="200,height:200,onSelect:aa">
<div title="Title1" ></div>
<div title="Title2" ></div>
</div>
onAdd:在一个新面板被添加时触发。
<div class="easyui-accordion" data-options="200,height:200,onAdd:aa">
<div title="Title1" ></div>
<div title="Title2" ></div>
</div>
onBeforeRemove:在可伸缩面板被移除之前触发,返回false将取消移除。
<div class="easyui-accordion" data-options="200,height:200,onBeforeRemove:aa">
<div title="Title1" ></div>
<div title="Title2" ></div>
</div>
onRemove:在一个可伸缩面板被移除时触发。
<div class="easyui-accordion" data-options="200,height:200,onRemove:aa">
<div title="Title1" ></div>
<div title="Title2" ></div>
</div>
accordion的方法
options:返回容器属性对象。
panels:获取所有的面板。
resize:重置可伸缩面板。
getSelected:获取被选择的面板。
getPanel:获取特定的可伸缩面板。
select:选择特定的面板。
add:添加一个先的可伸缩面板。
remove:移除特定的面板。
-->
<div >
<div title="Title1" icon="icon-sys"></div>
<div title="Title2" ></div>
<div title="Title3" ></div>
<div title="Title4" ></div>
</div>
<input type="button" >
<input type="button" >
<script>
function aa(){
alert('123');
}
//方法的使用
$(function (){
$("#tian").click(function (){
$("#p").accordion('add',{
title:"Title1"
})
})
$("#yi").click(function (){
$("#p").accordion('remove','Title1');
})
})
</script>
</body>
</html>