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

最新推荐文章于 2024-06-04 10:00:18 发布

我想我是人

最新推荐文章于 2024-06-04 10:00:18 发布

阅读量1.8k

点赞数

分类专栏： Web编程 easyui 文章标签： easyui accordion

本文链接：https://blog.csdn.net/redeg/article/details/55823270

版权

Web编程同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

easyui

26 篇文章 1 订阅

订阅专栏

　　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><img src="image/nav_monkey.png" alt="" /></td>
                            <td>
                              <a href="javascript:void(0);" onclick="openPage('cby.php')">长臂猿</a>
                            </td>
                        </tr>
                        <tr>
                          <td><img src="image/nav_monkey.png" alt="" /></td>
                          <td><a href="#">猩猩</a></td></tr>
                        <tr>
                          <td><img src="image/nav_monkey.png" alt="" /></td>
                          <td><a href="#">卷尾猴</a></td>
                        </tr>
                    </table> 
                </div>
                <div title="龟类" class="nav-item">
                    <table>
                        <tr>
                          <td><img src="image/nav_turtle.png" alt="" /></td>
                          <td><a href="#">草龟</a></td>
                        </tr>
                        <tr>
                          <td><img src="image/nav_turtle.png" alt="" /></td>
                          <td><a href="#">巴西龟</a></td>
                        </tr>
                        <tr>
                          <td><img src="image/nav_turtle.png" alt="" /></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>

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">
            <img class="logo" src="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	是否允许同时展开多个面板。 1.3.5及以上版本支持。
selected	数值	0	初始化时选中的面板索引，索引从0开始。 1.3.5及以上版本支持。

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

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

accordion组件方法

方法名称	参数	描述
options	无	返回所有属性。
panels	无	返回所有面板。
resize	无	重置组件大小。
getSelected	无	返回第一个选中的面板。
getSelections	无	返回所有选中的面板。1.3.5及以上版本支持。
getPanel	which	返回指定的面板。参数which既可以是面板的标题（字符串），也可以是面板的索引（数字）。
getPanelIndex	panel	返回指定面板的索引，参数panel是面板对象。 1.3及以上版本支持。
select	which	选中指定的面板。参数参考”getPanel”方法。
unselect	which	取消选中指定的面板。参数参考”getPanel”方法。 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>