【EasyUI篇】Accordion分类组件-CFANZ编程社区

微信公众号：程序yuan

9.Accordion分类组件

【EasyUI篇】Accordion分类组件_javascript

【EasyUI篇】Accordion分类组件_html_02

【EasyUI篇】Accordion分类组件_EeayUI_03

【EasyUI篇】Accordion分类组件_Accordion_04

【EasyUI篇】Accordion分类组件_EeayUI_05

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');
    });



});

效果图

【EasyUI篇】Accordion分类组件_Accordion_06

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

【EasyUI篇】Accordion分类组件_EeayUI_07