在tabs下的页面中打开另一个页面

最新推荐文章于 2023-12-22 09:51:50 发布

zk_Kang

最新推荐文章于 2023-12-22 09:51:50 发布

阅读量4.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： div页面打开新页面 easyui

本文链接：https://blog.youkuaiyun.com/zhang_kang_user/article/details/77164542

web前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用EasyUI框架实现的页面布局方案，通过左侧导航菜单与右侧Tabs页面组合来构建多页面应用。详细解释了如何通过JavaScript动态添加和切换Tabs页面，并解决了常见问题。

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

页面格式设计为，左边为导航栏，右边为tab页面，使用的是easyui框架中的tabs

<!-- 页脚信息 -->
<div data-options="region:'south',border:false" style="height:20px; background:#F3F3F3; padding:2px; vertical-align:middle;">
    <span id="sysVersion">系统版本：V1.0</span>
    <span id="nowTime"></span>
</div>
<!--  左侧导航  -->
<div data-options="region:'west',split:true,title:'导航菜单', fit:false" style="width:200px;">
    <ul id="menuTree" class="ztree">
    </ul>
</div>
<!-- 内容tabs -->
<div id="center" data-options="region:'center'">
    <!-- 这个定义div的id，后面需要用到-->
    <div id="tabs" class="easyui-tabs">
        <div title="欢迎使用" style="padding:5px;display:block;">
            正在更新中...（这是默认创建的一个div页面）
        </div>
    </div>
</div>

在内容tabs中，下面嵌套的每一个div都为一个页面，从一个div中打开另一个，或者转到另一个div页面中，需要传递页面url和页面的标题

function LRGHSLink(){//事件
    var urls = "JSGL/FPGL/GHSFPMain.html";
    var subtitle = "供货商发票录入（"+decodeURIComponent($.session.get("FDMC"))+"）";
        addTabw(subtitle,urls);
}

function addTabw(title, url){
    var jq=top.jQuery;
    if (jq('#tabs').tabs('exists', title)) {
        jq('#tabs').tabs('select', title);//如果存在当前页面，则跳转到页面
    } else {
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
        jq('#tabs').tabs('add',{//不存在，则添加一个
            title:title,
            content:content,
            closable:true
        });
    }
}

其中的var jq=top.jQuery;为关键，如果使用 $(‘#tabs’).tabs(‘exists’, title);会造成‘nodeName’ undefined；也就是“#tabs”找不到。具体原因是因为，页面div嵌套在父类的tabs里，所以，要写成父类也就是顶层的window对象的jquery对象.
当然关闭div页面使用

 $('#tabs').tabs('close', title);