微信公众号：程序yuan
9.Accordion分类组件
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Accordion.js"></script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
<%--Class加载方式--%>
<%--<div 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">
<div title="accordion1">accordion1</div>
<div title="accordion2">accordion2</div>
<div title="accordion3">accordion3</div>
</div>
<button id="btn1">获得所有选中的面板</button>
<button id="btn2">获得面板索引</button>
<button id="btn3">选中第二块面板</button>
<button id="btn4">添加一块面板</button>
<button id="btn5">移除一块面板</button>
</body>
</html>
JS文件
$(function () {
$("#box").accordion({
//----------- 属性列表 -----------------
//设置容器的宽和高 默认为auto
width:300,
height:'auto',
//设置true则是适应父容器，默认false,
fit:false,
//设置是否显示边框，默认为true
border:true,
//设置展示和折叠时是否显示动画效果，默认为true
animate:true,
//设置是否允许同时开展多个，默认为false
multiple:false,
//设置初始化时展开哪个面板，参数为索引
selected:0,
//------------- 事件列表 -----------------
//选中时执行
onSelect:function (title,index) {
// alert("onSelect: title:"+title+", index:"+index);
},
//取消选中时执行
onUnselect:function (title,index) {
// alert("onUnselect: title:"+title+", index:"+index);
},
onAdd:function (title,index) {
alert("onAdd: title:" + title + ", index:" + index);
},
onBeforeRemove:function (title,index) {
alert("onBeforeRemove: title:"+title+", index:"+index);
},
onRemove:function (title,index) {
alert("onRemove: title:"+title+", index:"+index);
}
});
//------------- 方法列表 ----------------
// console.log($("#box").accordion('options'));
//返回所有面板
// console.log($("#box").accordion('panels'));
//调整分类组件的大小
$("#box").accordion('resize');
console.log($("#box").accordion('getSelected'));
//获得所有选中的面板
$("#btn1").click(function () {
console.log($("#box").accordion("getSelections"));
});
//获得面板的下标
$("#btn2").click(function () {
//通过下标或名称获得面板后获得其索引 参数可以是title或index
// alert($("#box").accordion('getPanelIndex',$("#box").accordion('getPanel',0)));
//获得选中面板的下标
alert($("#box").accordion('getPanelIndex',$("#box").accordion('getSelected')));
});
//选中指定面板
$("#btn3").click(function () {
//选中某块面板，参数可以是index，或是title
// $("#box").accordion('select',1);
$("#box").accordion('select','accordion2');
});
//新增面板
$("#btn4").click(function () {
$("#box").accordion('add',{
title:"New Panel",
content:"新增面板",
//实现关闭按钮，可关闭
closable:true,
//默认选中
selected:false,
//显示折叠按钮
collapsible:true,
});
});
//删除
$("#btn5").click(function () {
//选中某块面板，参数可以是index，或是title
$("#box").accordion('remove','accordion2');
});
});效果图
------------------------------------------------
关注微信公众号获取更多资源
