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

原创 于 2023-05-17 11:41:33 发布 · 1.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#easyui #前端 #javascript

文章讲述了如何使用EasyUI框架在HTML页面中创建和管理选项卡面板，包括添加、选择和判断选项卡是否存在。通过JavaScript函数处理按钮点击事件，动态创建或选择已存在的选项卡，同时展示了如何在选项卡中加载内容，以及利用iframe标签加载远程数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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>

从以上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>

在编写以上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>

在编写以上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>

如下图所示:

在这里插入图片描述

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

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

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>

customer.html

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

linkman.html

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

如图所示效果：

在这里插入图片描述

easyUI快速入门第四讲——easyUI中的tabs（选项卡）组件
李阿昀的博客
10-29 2697
tabs（选项卡）组件的概述 选项卡会显示一批面板，但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 tabs（选项卡）组件的使用 首先，在所在项目的WebContent目录下新建一个04-tabs目录，并在该目录下新建一个04-tabs.html页面。 <!DOCTYPE html> <html> <h...
easyui的tabs控件
小七
06-24 1247
easyui的tabs控件前言一、先去看看前期做的前台和后台吧二、了解什么是tabs控件三、tabs属性的使用四、tabs事件的使用五、tabs方法的使用六、实现tabs的步骤1、我们先建两个jsp备用2、使用easyui中的模板tabs控件3、在index.js中再次使用tabs控件中的模板，进行修改 前言 因为前面做了easyui的前端和后端做铺垫，所以今天还是搞前端要实现的tabs控件 一、先去看看前期做的前台和后台吧 https://blog.youkuaiyun.com/qq_46964039/article
easyUI Tabs
weixin_33881140的博客
07-31 171
@author YHC $.fn.tabs.defaults覆盖默认值 tabs显示一个panel的集合,每一次仅仅只是显示一个tab panel,所有tab panel都有标题和一些小的工具按钮,包含close按钮和其他自定义按钮; 使用示例: 创建示例 创建 tabs 1.创建tabs通过标记; 从标记创建tabs非常简单,我们不需要写任何的javascr...
EasyUi之Tabs(选项卡)
qianbihua00的博客
04-02 5038
什么是Tabs 选项卡是最流行的导航模式之一(与菜单栏和垂直导航一样)。 选项卡最大的优点是用户很熟悉，而且经常是持久的内容，所以即使用户在网站或应用程序中跳出刚浏览过的内容，他们也不会迷失。 官方示例 成品示例 Tabs的使用案例 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给 标签添加一个类ID’easyui-tabs’。每个选项卡面板都通过子 标签进行创建，用法和panel(面板)相同。 2. 通过Javascript
EasyUI（tabs组件）
m0_46690290的博客
06-24 473
tabs选项卡tabs选项卡简介实现tabs选项卡实现关闭所有选项卡 tabs选项卡简介 1.从easyUI官方文档入手，找到tabs选项卡的简介以及查看demo示例 2.使用案例 (两种方式) 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给标签添加一个类ID’easyui-tabs’。每个选项卡面板都通过子标签进行创建，用法和panel(面板)相同。 示例 <div id="tt" class="easyui-tabs" style="
EasyUI之选项卡Tabs
牛栏山矿泉水
10-23 225
1、实例背景 EasyUI选项卡Tabs，获取选中第几个并打印Tabs标签内容 2、实现实例 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;EasyUI之选项卡Tabs&lt;/title&gt; &lt;link rel=&quo
jQuery EasyUI Tab 选项卡问题小结
10-21
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列组件，包括 Tab 选项卡，用于构建用户界面。本文将深入探讨在使用 jQuery EasyUI Tab 选项卡时可能会遇到的问题及其解决方案。 首先，让我们理解基本的...
jQuery easyui刷新当前tabs的方法
10-21
这行代码将获取id为`frame_tabs`的tabs组件中当前激活的选项卡。 2. `options`: 这个属性是一个对象，包含新选项卡的配置信息。其中最重要的是`content`或`href`属性，它们定义了选项卡内显示的内容。 - `...
jQuery EasyUI 选项卡面板tabs的使用实例讲解
10-18
选项卡面板（tabs）是用户界面中一个常见的组件，用于显示多个内容区域，用户可以通过点击不同的选项卡在各个内容区域间切换。下面将详细讲解如何使用 jQuery EasyUI 来创建和操作选项卡面板。 首先，为了使用 ...
Jquery Easyui选项卡组件Tab使用详解（10）
01-19
本文实例为大家分享了Jquery Easyui选项卡组件的实现代码，供大家参考，具体内容如下 加载方式 Class加载 <div class=easyui-tabs xss=removed> tab1 tab2 <div title=Tab3 data-options=iconCls:'i
Easyui--tabs控件
userwang的博客
06-26 254
目录前言tabs控件介绍tabs选项卡案例演示 前言 本章讲解的是easyui tabs控件，以及案例演示。 tabs控件介绍 从标记创建标签页（Tabs）更容易，我们不需要写任何 JavaScript 代码。 记住把 ‘easyui-tabs’ class 添加到 标记。 每个标签页面板（tab panel）通过子 标记被创建，其用法与面板（panel）一样。 <div id="tt" class="easyui-tabs" style="width:500px;height:250px
EasyuiTabs异步加载页面
03-13
EasyuiTabs异步加载页面,防止在href加载数据后页面跳出来
EasyUi之Tabs(选项卡)以及关闭选项卡
u012949335的专栏
04-16 1321
添加EasyUi的Tabs选项卡，实现各个菜单互选比照。
easyui的tabs控制
TZyybhs的博客
06-24 582
Tabs（选项卡）依赖关系使用案例创建面板1. 通过标签创建选项卡2. 通过Javascript创建选项卡添加新的选项卡面板获取选择的选项卡属性事件方法选项卡面板代码案例 使用$.fn.tabs.defaults重写默认值对象。 选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 依赖关系 panel linkbutton 使用案例 创建面板 1. 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Jav
easyui-tabs组件
licmi的博客
06-23 942
文章目录前言Tabs（选项卡）tabs组件效果图实现代码关闭选项卡总结 前言 Tree组件实现树形菜单 https://blog.youkuaiyun.com/licmi/article/details/106897820. 上篇博客做的是一个树形菜单选项卡，今天来完善一下。 首先分析需求：浏览器请求index.jsp，看到首页一个选项卡，当点击某个树形菜单再新增tab页，以及右键关闭当前页或者关闭所有页 Tabs（选项卡） 我们来看EasyUI库里的方法有哪些 事件 tabs组件 效果图 我们也结果
JQuery EasyUI Tabs
qq_42386143的博客
06-21 491
Tabs 选项卡显示一组面板。它一次只显示一个选项卡面板。每个选项卡面板都有标题标题和一些迷你按钮工具，包括关闭按钮和其他自定义按钮。 JQuery EasyUI需要引入的文件有如下4个： <!-- jquery核心库 --> <script type="text/javascript" src="easyui/jquery.min.js"></script>...
EasyUI-标签(Tabs)用法
weixin_33676492的博客
10-08 275
用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易，我们不需要写任何JavaScript代码。记住把 'easyui-tabs' 类添加到&lt;div/&gt;标记，每个tab panel 经由子&lt;div/&gt;标记被创建，其用法与Panel一样。 1.  &lt;div id="tt" class="easyui-tabs" style="width:500p...
easyui-tabs
yiye2017zhangmu的博客
02-18 621
Tab属性： Tab点击事件： Tab方法： 实例： // 添加tab isClose=N不可关闭；=Y可以关闭 function addTab(title, url,isClose){ var closeType = isClose == "N" ? false : true; if ($('#centerTabs').tabs('exists', title...
【EasyUI篇】Tabs选项卡组件
ouYang的博客
08-29 3056
微信公众号：程序yuan 关注可了解更多的教程。问题或建议，请公众号留言; 查看--&gt; 全套EasyUI示例目录 8.Tabs选项卡组件   JSP文件 &lt;%--   Created by IntelliJ IDEA.   User: ooyhao   Date: 2018/7/29 0029   Time: 9:21 --%&gt; &lt;%...
jQuery EasyUI创建和管理Tabs选项卡教程
在 jQuery EasyUI 中，`Tabs` 组件是用于展示多个面板（或称为选项卡）的控件，允许用户在不同的内容之间切换。这个组件的使用既可以通过HTML标记直接创建，也可以通过JavaScript编程方式动态创建和管理。 依赖组件...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值