devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

四、easyUI中的tabs（选项卡）组件_jquary easyui tabs

作者：AllinToyou | 2024-02-08 14:18:41

赞

踩

jquary easyui tabs

1.tabs（选项卡）组件的概述

选项卡会显示一批面板，但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

在这里插入图片描述

2.tabs（选项卡）组件的使用

在项目新建一个04-tabs目录，并在该目录下新建一个04-tabs.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <!-- 引入easyUI的css文件和js库 -->
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
        <div title="数据区域" data-options="closable:true" style="padding:20px;display:none;">
            数据区域
        </div>
    </div>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

从以上HTML页面中，可以发现使用到了一个选项卡面板属性，即closable属性。选项卡面板除了有下表列出的一些公共属性之外

属性名属性值类型描述默认值
idstring选项卡面板的ID属性null
titlestring选项卡面板的标题文本
contentstring选项卡面板的内容
hrefstring从URL加载远程数据内容填充到选项卡面板null
cacheboolean如果为true，在href属性设置了有效值的时候缓存选项卡面板true
iconClsstring定义了一个图标的CSS类ID显示到选项卡面板标题。nul
widthnumber选项卡面板宽度auto
heightnumber选项卡面板高度auto
collapsibleboolean如果为true，则允许选项卡摺叠false

还有它独有的属性，如下表所示

属性名属性值类型描述默认值
closableboolean在设置为true的时候，选项卡面板将显示一个关闭按钮，在点击的时候会关闭选项卡面板false
selectedboolean在设置为true的时候，选项卡面板会被选中false

如下图所示的效果:

在这里插入图片描述

有这样一个需求，点击一个按钮就要能创建一个选项卡面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <!-- 引入easyUI的css文件和js库 -->
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
    <a href="#" id="btn" class="easyui-linkbutton">按钮</a>
    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
        <div title="数据区域" data-options="closable:true" style="padding:20px;display:none;">
            数据区域
        </div>
    </div>

    <script type="text/javascript">
        //点击按钮创建一个选项卡面板
        $(function () {
            $("#btn").click(function() {
                //添加一个新的选项卡面板
                $('#tt').tabs('add',{
                    title:'客户管理',
                    content:'客户管理的数据',
                    closable:true
                });
            });
        });
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

在编写以上js代码时，用到了选项卡组件的一个方法，即add方法

在这里插入图片描述

在Google Chrome浏览器中访问该页面

在这里插入图片描述

发现每点击此按钮，就新创建一个选项卡面板，这显然是不合逻辑的，合逻辑的应该是要先判断选项卡面板是否存在，如果已经存在了，那么就让其被选中，如果没有存在，那么就新创建一个选项卡面板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <!-- 引入easyUI的css文件和js库 -->
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
    <a href="#" id="btn" class="easyui-linkbutton">按钮</a>
    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
        <div title="数据区域" data-options="closable:true" style="padding:20px;display:none;">
            数据区域
        </div>
    </div>

    <script type="text/javascript">
        //点击按钮创建一个选项卡
        $(function() {
            $("#btn").click(function() {
                //判断标题为客户管理的选项卡是否存在？
                var flag = $("#tt").tabs("exists", "客户管理");
                if (flag) {
                    //已经存在该选项卡了
                    //那么选择一个标题为客户管理的选项卡面板（让其被选中）
                    $('#tt').tabs("select", "客户管理");
                } else {
                    //不存在该选项卡
                    //添加一个新的选项卡
                    $('#tt').tabs('add',{
                        title:'客户管理',
                        content:'客户管理的数据',
                        closable:true
                    });
                }
            });
        });
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

在编写以上js代码时，又用到了选项卡组件的两个方法，即exists方法和select方法

方法名方法参数描述
selectwhich选择一个选项卡面板，'which’参数可以是选项卡面板的标题或者索引
existswhich表明指定的面板是否存在，'which’参数可以是选项卡面板的标题或索引

在Google Chrome浏览器中访问该页面

在这里插入图片描述

此刻，要做的事情就是点击各分类面板里面的超链接，然后在中间区域面板中新建一个选项卡面板，并在该选项卡面板中加载相应的数据，正如下图所示的这样

在这里插入图片描述

在HTML页面上简单使用下<iframe>标签，在所在项目的目录下新建一个test.html页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
    <body>
        <!-- 这里发起的就是一次新的请求 -->
        <iframe src=""></iframe>
    </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

如下图所示:

在这里插入图片描述

如果想要将该块区域隐藏掉，那么test.html页面的内容就应该改成下面这样

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
    <body>
        <!-- 这里发起的就是一次新的请求 -->
        <iframe src="" style="border: 0px"></iframe>
    </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

3.重构首页

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 引入easyUI的css文件和js库 -->
    <link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/themes/icon.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <style type="text/css">
        /* 自己定义的样式，去掉超链接的下划线 */
        .menuA {
            text-decoration:none;
        }
    </style>
</head>
<body>
    <!-- 布局 -->
    <div id="cc" class="easyui-layout" data-options="fit:true">
        <!-- 面板 -->
        <div data-options="region:'north',title:'CRM管理系统',split:true" style="height:100px;"></div>
        <div data-options="region:'west',title:'系统菜单',split:true" style="width:200px;">
            <!-- 分类容器 -->
            <div id="aa" class="easyui-accordion" data-options="fit:true">
                <div title="客户管理" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;">
                    <a href="tabs/customer.html" class="menuA">客户管理</a>
                </div>
                <div title="联系人管理" data-options="iconCls:'icon-reload'" style="padding:10px;">
                    <a href="tabs/linkman.html" class="menuA">联系人管理</a>
                </div>
                <div title="拜访记录管理" data-options="iconCls:'icon-reload'" style="padding:10px;">
                    <a href="#" class="menuA">拜访记录管理</a>
                </div>
                <div title="统计分析" data-options="iconCls:'icon-reload'" style="padding:10px;">
                    <a href="#" class="menuA">统计分析</a>
                </div>
                <div title="系统管理" data-options="iconCls:'icon-reload'" style="padding:10px;">
                    <a href="#" class="menuA">系统管理</a>
                </div>
            </div>
        </div>

        <div id="tt" data-options="region:'center'" class="easyui-tabs" style="padding:5px;background:#eee;">
            <div title="数据区域" data-options="closable:true" style="padding:20px;display:none;">
                数据区域
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(".menuA").click(function () {
            // 1.在点击各分类面板里面的超链接时，要得到超链接里面的文本内容，例如客户管理、联系人管理等
            let testContext = this.innerHTML;
            // 2.获得到超链接请求的ur1路径，这个ur1路径很重要，因为待会要从这个url路径处获取响应数据
            let ur = this.href;
            // 3.创一个选项卡。由于创建一个选项的代码比较多，所要这里可以抽取成一个函数，并将超链接里面的文本内容与ur1路径传递到该函数中
            createTabs(testContext, ur);
            // 4.点击超链接时，由于它总会跳转，但在这里我们要让其不能跳转
            return false;
        });

        // 创建选项卡面板的函数
        function createTabs(textContent, url) {
            // 判断选项卡面板是否存在
            var flag = $("#tt").tabs("exists", textContent);
            if (flag) {
                // 如果已经存在该选项卡面板了，那么就让其被选中
                $('#tt').tabs("select", textContent);
            } else {
                // 如果不存在该选项卡面板，那么创建一个新的选项卡面板
                $('#tt').tabs('add',{
                    title: textContent,
                    content: createUrl(url),
                    closable: true
                });
            }
        }

        function createUrl(url) {
            /**
             * <iframe>标签的应用，可以在任何的一个地方都能用，它就是页面里面的一块区域。
             * 经常有人用<iframe>标签隐式提交一些东西，他往<iframe>标签里面放个表单啥的,然后把<iframe>标签隐藏掉，你在页面上看不着
             * 然后它也向后台提交数据了!
             */
            return "<iframe src='" + url + "' style='border:0px; width:100%; height:95%'></iframe>";
        }
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90

customer.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>客户管理</title>
</head>
    <body>
        客户管理的数据。。。。。。。
    </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

linkman.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> 联系人管理</title>
</head>
    <body>
        联系人管理的数据。。。。。。。
    </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

如图所示效果：

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/69414
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号