JQuery EasyUI 选项卡联动demo(7)

最新推荐文章于 2022-05-04 17:50:13 发布
最新推荐文章于 2022-05-04 17:50:13 发布
阅读量880 收藏
点赞数
分类专栏： EasyUI 文章标签： easyui jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36735409/article/details/78059372
版权

先看代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Full Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyUI/demo/demo.css">
    <script type="text/javascript" src="easyUI/jquery.min.js"></script>
    <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script>
</head>
<body>
        <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
        </div>
        <div id="tab-tools">
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" οnclick="addPanel()"></a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" οnclick="removePanel()"></a>
        </div>
        <script type="text/javascript">
            var index = 0;
            function addPanel(){
                index++;
                $('#tt').tabs('add',{
                    title: 'Tab'+index,
                    content: '<div style="padding:10px">Content'+index+'</div>',
                    closable: true
                });
            }
            function removePanel(){
                var tab = $('#tt').tabs('getSelected');
                if (tab){
                    var index = $('#tt').tabs('getTabIndex', tab);
                    $('#tt').tabs('close', index);
                }
            }
        </script>
</body>
</html>



效果图：


点击右上角的绿色按钮，可以实现选项卡的添加和删除。

我们先对这段代码进行一下改造，首先将选项卡放进layout 布局里：

<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" style="height:50px"></div>
    <div data-options="region:'south',split:true" style="height:50px;"></div>
    <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
    <div data-options="region:'west',split:true" title="West" style="width:250px;"></div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="height: 100%;">
            </div>
            <div id="tab-tools">
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" οnclick="addPanel()"></a>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" οnclick="removePanel()"></a>
            </div>
        </div>
</div>

如图：


然后将选项卡的增加、删除功能移到布局的左边的框体中，如图：



代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Full Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyUI/demo/demo.css">
    <script type="text/javascript" src="easyUI/jquery.min.js"></script>
    <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        var index = 0;
        function addPanel(){
            index++;
            $('#tt').tabs('add',{
                title: 'Tab'+index,
                content: '<div style="padding:10px">Content'+index+'</div>',
                closable: true
            });
        }
        function removePanel(){
            var tab = $('#tt').tabs('getSelected');
            if (tab){
                var index = $('#tt').tabs('getTabIndex', tab);
                $('#tt').tabs('close', index);
            }
        }
    </script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" style="height:50px"></div>
    <div data-options="region:'south',split:true" style="height:50px;"></div>
    <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
    <div data-options="region:'west',split:true" title="West" style="width:250px;">
        <div οnclick="addPanel()" style="text-align: center; border: 1px solid red;cursor: pointer;margin-top: 10px;background-color: #00bbee">增加</div>
        <div οnclick="removePanel()" style="text-align: center; border: 1px solid red;cursor: pointer;margin-top: 10px;background-color: #00bbee">删除</div>
    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" style="border: 0px;">
        <div id="tt" class="easyui-tabs" style="height: 100%;">
        </div>
    </div>
</div>
</body>
</html>
然后我们将增加和删除改成选项卡1、选项卡2，我们想要的效果，是点击左侧的选项卡1，那么右侧就会显示出选项卡1，点击选项卡2，右侧就会显示选项卡2；
代码： 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Full Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyUI/demo/demo.css">
    <script type="text/javascript" src="easyUI/jquery.min.js"></script>
    <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        function addPanel(index){
            $('#tt').tabs('add',{
                title: '选项卡'+index,
                content: '<div style="padding:10px">Content'+index+'</div>',
                closable: true
            });
        }
        function removePanel(){
            var tab = $('#tt').tabs('getSelected');
            if (tab){
                var index = $('#tt').tabs('getTabIndex', tab);
                $('#tt').tabs('close', index);
            }
        }
    </script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" style="height:50px"></div>
    <div data-options="region:'south',split:true" style="height:50px;"></div>
    <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
    <div data-options="region:'west',split:true" title="West" style="width:250px;">
        <div οnclick="addPanel(1)" style="text-align: center; border: 1px solid red;cursor: pointer;margin-top: 10px;background-color: #00bbee">选项卡1</div>
        <div οnclick="addPanel(2)" style="text-align: center; border: 1px solid red;cursor: pointer;margin-top: 10px;background-color: #00bbee">选项卡2</div>
    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" style="border: 0px;">
        <div id="tt" class="easyui-tabs" style="height: 100%;">
        </div>
    </div>
</div>
</body>
</html>

但这样做有一个问题没有解决，就是当我们的选项卡1处于打开状态时，再点击选项卡1的按钮，还会打开一个选项卡1。也就是说我们需要一个判断，每一个选项卡都只能打开一次。我们可以给每一个选项卡一个标识（flag=0），当选项卡打开后，标识就会发生变化（flag=1)；那么我们就可以进行判断，如果flag=1，那么就不需要再打开一个选项卡了。我们稍微修改一下js代码： 

<script type="text/javascript">
        var flag1=0;
        var flag2=0;
        function addPanel(index){
            if(index==1){
                if(flag1==0) {
                    flag1=1;
                    $('#tt').tabs('add',{
                        title: '选项卡'+index,
                        content: '<div style="padding:10px">Content'+index+'</div>',
                        closable: true
                    });
                }
            }else if(index==2){
                if(flag2==0){
                    flag2=2;
                    $('#tt').tabs('add',{
                        title: '选项卡'+index,
                        content: '<div style="padding:10px">Content'+index+'</div>',
                        closable: true
                    });
                }
            }
        }
</script>
这样一来，一个选项卡就只能打开一次了。

接下来我们需要做的是，如果这个选项卡关闭，就让flag=0；这样就可以在关闭选项卡之后可以再次打开。

添加script代码：

 $(function (){
            $('#tt').tabs({
                onBeforeClose:function(title){
                    if(title=='选项卡'+flag1){
                        flag1=0;
                    }
                    if(title=='选项卡'+flag2){
                        flag2=0;
                    }
                }
            });
        });
这段代码给选项卡添加了一个关闭前事件，如果点击选项卡的关闭按钮，就会触发该事件，将对应title的flag的值改成0；

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Full Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyUI/demo/demo.css">
    <script type="text/javascript" src="easyUI/jquery.min.js"></script>
    <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        var flag1=0;
        var flag2=0;
        function addPanel(index){
            if(index==1){
                if(flag1==0) {
                    flag1=1;
                    $('#tt').tabs('add',{
                        title: '选项卡'+index,
                        content: '<div style="padding:10px">Content'+index+'</div>',
                        closable: true
                    });
                }
            }else if(index==2){
                if(flag2==0){
                    flag2=2;
                    $('#tt').tabs('add',{
                        title: '选项卡'+index,
                        content: '<div style="padding:10px">Content'+index+'</div>',
                        closable: true
                    });
                }
            }
        }
        $(function (){
            $('#tt').tabs({
                onBeforeClose:function(title){
                    if(title=='选项卡'+flag1){
                        flag1=0;
                    }
                    if(title=='选项卡'+flag2){
                        flag2=0;
                    }
                }
            });
        });
    </script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" style="height:50px"></div>
    <div data-options="region:'south',split:true" style="height:50px;"></div>
    <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
    <div data-options="region:'west',split:true" title="West" style="width:250px;">
        <div οnclick="addPanel(1)" style="text-align: center; border: 1px solid red;cursor: pointer;margin-top: 10px;background-color: #00bbee">选项卡1</div>
        <div οnclick="addPanel(2)" style="text-align: center; border: 1px solid red;cursor: pointer;margin-top: 10px;background-color: #00bbee">选项卡2</div>
    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" style="border: 0px;">
        <div id="tt" class="easyui-tabs" style="height: 100%;">
        </div>
    </div>
</div>
</body>
</html>
这样就大体上实现了我们想要的功能。

不过还需要加上一点，就是当我们点击左侧“选项卡1”按钮的时候，当选项卡1已经被打开过，却并不是在选中状态时，我们可以将它设置为选中状态。
完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Full Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyUI/demo/demo.css">
    <script type="text/javascript" src="easyUI/jquery.min.js"></script>
    <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        var flag1=0;
        var flag2=0;
        function addPanel(index){
            if(index==1){
                if(flag1==0) {
                    flag1=1;
                    $('#tt').tabs('add',{
                        title: '选项卡'+index,
                        content: '<div style="padding:10px">Content'+index+'</div>',
                        closable: true
                    });
                }else{
                    $('#tt').tabs('select','选项卡'+flag1);
                }
            }else if(index==2){
                if(flag2==0){
                    flag2=2;
                    $('#tt').tabs('add',{
                        title: '选项卡'+index,
                        content: '<div style="padding:10px">Content'+index+'</div>',
                        closable: true
                    });
                }else{
                    $('#tt').tabs('select','选项卡'+flag2);
                }
            }
        }
        $(function (){
            $('#tt').tabs({
                onBeforeClose:function(title){
                    if(title=='选项卡'+flag1){
                        flag1=0;
                    }
                    if(title=='选项卡'+flag2){
                        flag2=0;
                    }
                }
            });
        });
    </script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" style="height:50px"></div>
    <div data-options="region:'south',split:true" style="height:50px;"></div>
    <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
    <div data-options="region:'west',split:true" title="West" style="width:250px;">
        <div οnclick="addPanel(1)" style="text-align: center; border: 1px solid red;cursor: pointer;margin-top: 10px;background-color: #00bbee">选项卡1</div>
        <div οnclick="addPanel(2)" style="text-align: center; border: 1px solid red;cursor: pointer;margin-top: 10px;background-color: #00bbee">选项卡2</div>
    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" style="border: 0px;">
        <div id="tt" class="easyui-tabs" style="height: 100%;">
        </div>
    </div>
</div>
</body>
</html>



kaleid_liner
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI使用的demo
03-25
该demo是EasyUI的简单实现例子，包括整个系统的整体布局、对数据的增删改查功能、窗口间的传值、自定义列的具体实现等功能，是一个适合初学easyui的不错demo.
EasyUI 第一个demo
zhanyouwen的博客
06-08 2012
EasyUI 第一个demo
EasyUI实例小Demo(一)
零俗
10-31 8004
一：easyui的datagrid 页面部分：
easyui简单demo
m0_37269701的博客
04-03 786
今天主要搞了一个简单的easyui的crud 前台代码是在官网上找的 在这里插入代码片 <body> <h2>Basic CRUD Application</h2> <div class="demo-info" style="margin-bottom:10px"> <div class="demo-tip icon-tip">&...
easyui php demo,初试JqueryEasyUI（附Demo）
weixin_33806591的博客
03-12 301
写在前面关于easyui不多说，对于我们这样没有美术功底的程序员来说，简直是大大的福利，园里面也有不少人在用，自己在整理一个个站，后台管理要用，正好可以学习下。网上找了相关的教程什么的，但是发现还是官网上的demo讲的狠详细，还有就是下载后的demo示例，但都是某个控件示例，很遗憾，没有整个系统的demo。下面我们就一步一步来创建，在做的过程也有许多的问题，对于菜鸟的我们来说，享受其中才是最重要的...
Jquery组件easyUi实现选项卡切换示例
01-21
本文实例为大家分享了Jquery easyUi选项卡切换效果，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Basic Tabs - jQuery EasyUI Demo</...
jQuery EasyUI 选项卡面板tabs的使用实例讲解
10-18
下面小编就为大家分享一篇jQuery EasyUI 选项卡面板tabs的使用实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Jquery Easyui选项卡组件Tab使用详解（10）
10-20
主要为大家详细介绍了Jquery Easyui菜单组件Menu的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
EasyuiDemo
星空月零的博客
04-01 757
JSP <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <% String path = request.getContextPath(); String basePath =...
easyUI 后台经典框架DEMO下载
weixin_30748995的博客
12-13 170
采用easyui 1.2.6 + jquery 1.7.2 设计 有不明白的朋友加群或加我QQ(709047174) Jquery-EasyUi-demo点击我下载 转载于:https://www.cnblogs.com/angelasp/p/jquery-easyui.html...
easyui_demo_DEMO_easyui的一个demo_easyui_
09-29
一个easyui界面的模板，可以导入项目做一些自定义的修改。
jQuery EasyUI Demo 官方实例
04-22
web端demo，easyui-1.14.2完整官方demo演示，格式是exe的的示例小程序，exe版免安装的，非常实用，推荐给大家
EasyUI的使用
泽漆
01-31 1642
准备阶段 本次云平台系统使用的是easyui1.3.2， EasyUI 是div布局和jquery的集合体。 我们将jquery-easyui压缩包解压到 ，可以看到 在上述文件中被红框框起来的使我们真正需要的。下面一一介绍红框中的文件。   1Demo demo中是各种easyui的小例子，大家可以用浏览器打开。例如双击..\jquery-easyui\demo\dat
EasyUI管理后台模板（附源码）
热门推荐
书写人生
07-17 2万+
下载地址：http://files.cnblogs.com/wyguo/easyui_demo.zip 作者：Wuyeguo 声明：欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 下载地址：http://files.cnblogs.com/wyguo/easyui_demo.zip 作
EasyUI美化界面项目系统（整合EasyUI_Insdep皮肤）
峰少少博文
11-04 4432
原使用easyui开发的系统项目基础做的Demo，极大程度上美化了界面。 aceAdmin提炼版本见其他博文，此篇新增与easyui的整合，并最大程度上不改变原系统操作方式，以及主页面的各种功能，减小美化的替代量。 老界面： 新美化界面： Ace Admin 官方网站 http://ace.jeka.by/ sitemesh标签使用，decorators.xml过滤jsp页面（参考） https://blog.csdn.net/t1012665655/article/details/885281
【项目成长日记】如何使用EasyUI-demo创建自己的项目
卷
09-04 3360
7月伊始的时候，我们的米总给我们研发团队下达了新的指令。 “9月份之前，要把我们的ITOO5.1搞出来！”我和我的小伙伴们都有点慌了，毕竟我们的ITOO是个百万数量级访问多模块的大应用 。2个月的时间也不算很充裕。而我们的小队更是负责一个全新的模块开发，连需求文档都有自己搞。所以，为了节省开发时间，我们决定使用Easy-UI来作为我们的界面主体。
easyUI——easyUI（入门）
ys_chy的博客
05-04 643
学习easyUI，在jsp中布局。
ThinkPHP3.2.3---更换easyui主题（theme）
易名
11-09 3979
在ThinkPHP更换easyui的theme很简单，这里做个备忘。效果ui-sunny ui-pepper-grinder ui-dark-hive ui-cupertino 实现下载主题包  下载地址：http://download.csdn.net/detail/freeape/9254227代码在要实现切换主题的html页面加入easyui的css和js文件<script type="tex
easyUI简单功能demo
weixin_34363171的博客
11-20 179
2019独角兽企业重金招聘Python工程师标准>>> ...
easyUI笔记11
最新发布
08-08
本文主要是对jQuery EasyUI的学习过程进行总结和介绍。jQuery EasyUI是一个基于jQuery框架的插件，集成了多种用户界面插件，可以帮助快速搭建出美观、易用的前端界面。 在开始使用jQuery EasyUI之前，首先需要下载...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值