JQuery EasyUI 选项卡打开与关闭（9）

最新推荐文章于 2021-01-11 20:22:18 发布

kaleid_liner

最新推荐文章于 2021-01-11 20:22:18 发布

阅读量2.2k

点赞数

分类专栏： EasyUI 文章标签： easyui jquery

本文链接：https://blog.csdn.net/qq_36735409/article/details/78189359

版权

EasyUI 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

在之前的 JQuery EasyUI 选项卡联动demo(7) 中，我们通过添加、判断选项卡是否已经存在，如果存在则定位该选项卡、通过选项卡关闭前事件对选项卡进行标记的方法来进行选项卡的打开与关闭操作。

其实，我们还有更简便的方法来控制选项卡的开闭状态。

首先，我们要判断选项卡是否已经被创建，即：$("#tt").tabs("exists",title);（这里的 tt 即是选项卡的id，这里的title就是此选项卡的名称）；

如果已经被创建，那么就将它选中，即： $("#tt").tabs("select",title);

如果没有被创建，那么我们就添加一个此选项卡，即：

$('#tt').tabs('add',{
title: title,
content: title,
closable: true
});

完整代码：

<!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 changeTabs(title){
            var bol = $("#tt").tabs("exists",title);
            if(bol){
                $("#tt").tabs("select",title);
            }else{
                $('#tt').tabs('add',{
                    title: title,
                    content: title,
                    closable: true
                });
            }
        }
    </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="changeTabs('选项卡1')" style="text-align: center; border: 1px solid red;cursor: pointer;margin-top: 10px;background-color: #00bbee">选项卡1</div>
        <div οnclick="changeTabs('选项卡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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery EasyUI 选项卡打开与关闭（9）

在之前的 JQuery EasyUI 选项卡联动demo(7) 中，我们通过添加、判断选项卡是否已经存在，如果存在则定位该选项卡、通过选项卡关闭前事件对选项卡进行标记的方法来进行选项卡的打开与关闭操作。其实，我们还有更简便的方法来控制选项卡的开闭状态。首先，我们要判断选项卡是否已经被创建，即：$("#tt").tabs("exists",title);（这里的 tt 即是选项卡的id，
复制链接

扫一扫

专栏目录