【连载】研究EasyUI系统— Accordion组件

Accordion组件是easyui框架中的布局组件之一，它提供了多个可展开/折叠的面板。Accordion经常用作页面的导航菜单。我们先通过制作一个导航菜单来认识一下Accordion。

accordion示例

　　图中左侧便是通过accordion组件构建的导航菜单，右侧是用panel构建的内容显示页面。点击左侧不同的菜单，右侧panel将会加载对应的页面，显示不同内容。
　　我们通过代码来研究一下accordion组件用法。示例代码主要包含两个页面，分别为accordionDemo.php和cby.php，前者包含导航菜单和内容显示页框架，后者是具体的内容页面。
　　
accordionDemo.php

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
        <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" />
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <title>accordionDemo</title>
        <style>
            a {
                text-decoration:none;
                font-size: 13px;
                color:black
            }
            .nav-left {
                float:left;
                width:200px;
                height:400px;
                margin-right: 20px;
            }
            .nav-item {
                padding: 10px;
                height: 328px;
                border: none;
            }
            .content {
                border-radius: 5px;
            }
            .contianer {
                width:100%;
            }
        </style>
        
        <script>
            function openPage(page) {
                $("#content_panel").panel("refresh",page);
            }
        </script>
    </head>
    <body>
        <div class="container">
            <!-- 左侧导航由accordion构建的导航菜单 -->
            <div id="nav_menu" class="easyui-accordion nav-left">
                <div title="灵长类" class="nav-item">
                    <table>
                        <tr>
                            <td>![](image/nav_monkey.png)</td>
                            <td>
                              <a href="javascript:void(0);" onclick="openPage('cby.php')">长臂猿</a>
                            </td>
                        </tr>
                        <tr>
                          <td>![](image/nav_monkey.png)</td>
                          <td><a href="#">猩猩</a></td></tr>
                        <tr>
                          <td>![](image/nav_monkey.png)</td>
                          <td><a href="#">卷尾猴</a></td>
                        </tr>
                    </table> 
                </div>
                <div title="龟类" class="nav-item">
                    <table>
                        <tr>
                          <td>![](image/nav_turtle.png)</td>
                          <td><a href="#">草龟</a></td>
                        </tr>
                        <tr>
                          <td>![](image/nav_turtle.png)</td>
                          <td><a href="#">巴西龟</a></td>
                        </tr>
                        <tr>
                          <td>![](image/nav_turtle.png)</td>
                          <td><a href="#">金钱龟</a></td>
                        </tr>
                    </table> 
                </div>
            </div>
            
            <!-- 右侧由Panel构建的内容显示页面 -->
            <div id="content_panel" class="easyui-panel content" data-options="width:500,height:400">
            </div>
        </div>
    </body>
</html>

<br />
cby.php

<html>
    <head>
        <meta charset="UTF-8">
        <title>长臂猿</title>
        <style>
            .logo {
                margin: 10px;
                width:80px;
                height:120px;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="contianer">
            ![](image/cby.jpg)
            <p style="margin:20px">
                长臂猿（学名：Hylobatidae）：是灵长目一科动物的通称，有4属16种。因臂特别长而得名。
                …………
            </p>
        </div>
    </body>
</html>

accordion.php构建了id为nav_menu的accordion组件，在nav_menu内部，每个子<div>就是一个子面板，代码中共构造了“灵长类”和“龟类”两个子面板。每个子面板中又有一个<table>，用来构建带图标的菜单链接。点击代码中的菜单链接，将调用openPage方法，openPage方法使用panel组件中的refresh方法，将对应的内容页（cby.php）加载到panel中显示（关于panel组件我们将另外专门说明）。
　　接下去介绍已给accordion的属性。由于accordion组件依赖于panel，因此这个组件有两个概念上的属性，其一是“容器(container)属性”，其二是“面板(panel)属性”。容器是指外围整体的框架，也就是整个accordion本身，包含了各个面板。面板则是指在容器中的各功能块，如“灵长类”或“龟类”等。
　　从代码中也能看出容器和面板的逻辑关系，id为nav_menu的div元素便是容器，它包含了灵长类、龟类两个面板，每个面板都是一个div元素。还有三个超链接，这三个超链接将分别显示在三个面板中。

容器属性

属性名称 属性值类型 属性默认值 描述
width 数值 auto 容器宽度。
height 数值 auto 容器高度。
border 布尔值 true 是否显示容器边框。
fit 布尔值 false 容器是否填充它的父组件。
animate 布尔值 true 是否在折叠或者展开时显示动画效果。
multiple 布尔值 false 是否允许同时展开多个面板。<br />1.3.5及以上版本支持。
selected 数值 0 初始化时选中的面板索引，索引从0开始。<br />1.3.5及以上版本支持。

容器属性非常简单，无需过多讲述。
　　accordion面板属性继承自panel组件，下述只是accordion独有的属性。
　　
扩展的panel属性

属性名称 属性值类型 属性默认值 描述
selected 布尔值 false 面板是否为展开状态。
collapsible 布尔值 true 是否允许面板显示折叠按钮。

accordion组件方法

方法名称 参数 描述
options 无 返回所有属性。
panels 无 返回所有面板。
resize 无 重置组件大小。
getSelected 无 返回第一个选中的面板。
getSelections 无 返回所有选中的面板。1.3.5及以上版本支持。
getPanel which 返回指定的面板。参数which既可以是面板的标题（字符串），<br />也可以是面板的索引（数字）。
getPanelIndex panel 返回指定面板的索引，参数panel是面板对象。<br />1.3及以上版本支持。
select which 选中指定的面板。参数参考”getPanel”方法。
unselect which 取消选中指定的面板。参数参考”getPanel”方法。<br />1.3.5及以上版本支持。
add options 新增面板。参数options是包含了面板各数据的json。
remove which 删除指定的面板。参数参考“getPanel”方法。

有些比较简单的方法就不再多说。
　　getSelected返回第一个选中的面板，而getSelections返回了所有选中的面板。

<script>
    var p1 = $('#nav_menu').accordion('getSelected');
    p1.panel('collapse');

    var p2 = $('nav_menu').accordion('getSelections');
    for(var i=0;i<p2.length;i++) {
        p2[i].panel('collapse');
    }
</script>

p1是通过“getSelected” 方法返回选中的面板，我们通过“collapse”方法将这个面板折叠；p2则是通过“getSelections”方法返回的一组选中面板，使用循环将这些面板全部折叠。

<script>
　　/* 根据索引号获取对应面板*/
　　var p = $('#nav_menu').accordion('getPanel', 1);
　　
　　/* 根据标题获取对应面板*/
　　p = $('#nav_menu').accordion('getPanel', '系统设置');
　　var index = $('#nav_menu').accordion('getPanelIndex', p2);
　　alert(index)
</script>

上例代码展示了“getPanel”和“getPanelIndex”两种方法的用法。getPanel参数which既可以是索引号，也可以是字符串形式的标题。
　　再来看一下如何增加一个面板。

<script>
    var options = {
        title:'我是新来的面板',
        content:'新来面板的内容',
        selected:false
    }
    $("#nav_menu").accordion("add", options);
</script>

新增一个面板时需要定义相关的面板参数，这些参数以JSON形式供“add”方法调用。
　　options中的各属性可以参见“panel”组件的属性，需要说明一下，如果“selected”属性为true（默认为true），新增的面板将处于选中状态。
　　
accordion组件事件

事件名称 参数 描述
onSelect title,index 面板选中时触发。参数title为面板的标题，index为面板索引。
onUnselect title,index 面板取消选中时触发。参数同上。1.3.5及以上版本支持。
onAdd title,index 新增面板时触发。参数同上。
onBeforeRemove title,index 删除面板前触发，如果返回false，则不删除。参数同上。
onRemove title,index 删除面板后触发。参数同上。

事件都比较容易理解，简单举一个例子，说明事件的用法：

<button onclick="delAccordion();">删除accordion</button>
<script>
    $("#nav_menu").accordion({
        onBeforeRemove:function(title, index) {
            var r = confirm("确认删除"+title+"(索引号:"+index+")吗？");
            return r;
        }
    });

    function delAccordion() {
        $("#nav_menu").accordion("remove", 1);
    }
</script>

上例代码使用了onBeforeRemove事件，它在“删除面板事件”发生前被触发。用户确认删除后，索引号为1的面板被删除。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 【连载】研究EasyUI系统— Tabs组件
    tabs组件是一系列面板的集合，不论在web亦或是其他客户端系统，tabs都是常用的组件。我们结合由accordi...
    我想我是人阅读 1,407评论 1赞 3
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,503评论 25赞 709
  • Bootstrap（基础二）
    第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根...
    凛0_0阅读 5,137评论 0赞 66
  • Java
    1.import static是Java 5增加的功能,就是将Import类中的静态方法，可以作为本类的静态方法来...
    XLsn0w阅读 1,282评论 0赞 2
  • 落•一眼喜都
    花开在春的季节里，希望飘扬，不落一丝牵挂。 ——题记 还没来的时候，东北三省中关于吉林的印象最为模糊，不前很后，只...
    在飞FSW阅读 488评论 1赞 2