【EasyUI篇】Accordion分类组件

微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;

查看--> 全套EasyUI示例目录

9.Accordion分类组件

JSP文件

<%--Created by IntelliJ IDEA.User: ooyhaoDate: 2018/7/29 0029Time: 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({//----------- 属性列表 -----------------//设置容器的宽和高 默认为autowidth:300,height:'auto',//设置true则是适应父容器，默认false,fit:false,//设置是否显示边框，默认为trueborder:true,//设置展示和折叠时是否显示动画效果，默认为trueanimate:true,//设置是否允许同时开展多个，默认为falsemultiple: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');});});

效果图

------------------------------------------------

关注小编微信公众号获取更多资源

【EasyUI篇】Accordion分类组件相关推荐

Accordion( 分类) 组件
一．加载方式 //class 加载方式 <div id="box" class="easyui-accordion" style="width ...
【EasyUI篇】一整套EasyUI示例集锦
目录: 1.可拖动组件Draggable 2.可放置组件Droppable 3.调整大小组件Resizable 4.Tooltip提示框组件 5.LinkButton按钮组件 6.ProgressBa ...
EasyUI系列学习(十一)-Accordion(分类)
一.加载 1.class加载 <div class="easyui-accordion" style="width:300px;height:200px" ...
第一百九十四节，jQuery EasyUI，Droppable(放置)组件
jQuery EasyUI,Droppable(放置)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...
第一百九十九节，jQuery EasyUI，Panel(面板)组件
jQuery EasyUI,Panel(面板)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...
第二百二十三节，jQuery EasyUI，ComboBox(下拉列表框)组件
jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 C ...
公众号500篇文章分类和索引
公众号的文章,已经累积到了500篇,每次数字的更迭,都会从中吸取经验和教训,得到一些启发,当然,少不了读者们的支持和鼓励,这些都是动力,督促着我. 人生面临很多的选择,有对有错,但其实对错是相对来说的 ...
公众号700篇文章分类和索引
杂货铺的文章,已经积累到700篇了,每篇文章的背后,都有自己的成长,以及读者的支持,虽然自己还是有很多需要提高的,但看着这些文章,自己至少在路上. 这些文章,可以按照技术和非技术分为两类,其中,技术类 ...
公众号1200篇文章分类和索引
承蒙读者朋友们的关照,截止到今天,杂货铺的文章已经积累到了1200篇,其中有超过2/3的文章都是原创的,即使是转载,我给的底线是一定要加些自己的见解,因为至少得让读者了解到这篇文章的价值,而不仅仅是文 ...

【EasyUI篇】Accordion分类组件

查看--> 全套EasyUI示例目录

9.Accordion分类组件

【EasyUI篇】Accordion分类组件相关推荐

最新文章

热门文章