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

来源：互联网发布：网络安全产品排名编辑：程序博客网时间：2024/05/17 23:42

在之前的 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 onclick="changeTabs('选项卡1')" style="text-align: center; border: 1px solid red;cursor: pointer;margin-top: 10px;background-color: #00bbee">选项卡1</div>        <div onclick="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>

阅读全文

0 0