关于easyUI在子页面增加显示tabs的一个问题

关于easyUI在子

在父页面点个链接能动态看到子页面的情况太简单，请看easyUI官网：http://www.jeasyui.com/tutorial/layout/tabs2.php
现在说的是在子页面点个按钮也能触发增加子页面的情况。
情景是，在父页面上有个div如：

Html代码

<div class="easyui-tabs" id="main" fit="true" border="false">
　　<div title="Welcome" iconCls="icon-page" style="padding:20px;overflow:hidden;">
　　</div>
</div>

在子页面上有个

Html代码

<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="testAddSubPage('new tab','http://www.baidu.com')">test add subpage</a>

现在想点这个链接能弹出一个新的tab，tab里面的内容是百度主页。关键的问题来了，就是testAddSubPage这个function怎么写。

直接这样写是不行的：

Js代码

function testAddSubPage(title,url){
var parentMain = window.parent.document.getElementById("main");
var $main = $(parentMain);
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$main.tabs('add',{
title:title,
content:content,
closable:true
}
);
}

这里虽然可以取到父页面那个id为main的div对象，但是把这个dom对象转化为jquery对象$main之后，$main.tabs('add',{...})这个方法死法报错不能通过。

改正的关键是用top.jQuery这个函数，这个函数具体出外我忘记了，用法看似是取得整个父页面对象，正确是写法：

Java代码

function testAddSubPage(title,url){
var jq = top.jQuery;
if (jq("#main").tabs('exists', title)){
jq("#main").tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
jq("#main").tabs('add',{
title:title,
content:content,
closable:true
});
}
}

这样，在子页面点击test add subpage这个链接之后，就会根据传入的url弹出另一个子页面，这里是百度。

查看图片附件

页面增加显示tabs的一个问题

关于easyUI在子页面增加显示tabs的一个问题相关推荐

EasyUI-子页面增加显示tabs的一个问题
在父页面点个链接能动态看到子页面的情况太简单,请看easyUI官网:http://www.jeasyui.com/tutorial/layout/tabs2.php 现在说的是在子页面点个按钮也能触发 ...
小程序自定义tabbar,子页面也显示tabbar
小程序自定义tabbar,子页面也显示tabbar 我找了很多很多的文件,大都是显示一级页面的tabbar的,子页面显示tabbar几乎没有,我自己整理了一下.如果有不对的地方,希望评论指出,我会进一 ...
js实现在页面实时显示时间，一个按钮控制时间暂停和开始
js实现在html实时显示时间,一个按钮控制时间暂停和开始.代码如下: <head><meta charset="UTF-8"><title>& ...
wordpress创建_如何在WordPress中创建子页面
wordpress创建 Do you want to create a child page on your site? Pages in WordPress can be standalone or ...
js/iframe 子页面调用父页面方法与父页面调用子页方法
博客转载于 https://blog.csdn.net/weixin_44512123/article/details/99698419 在做项目中都会存有主页面子页面.子页面嵌套中主页面中,主页面有 ...
iframe中由一个页面跳转到另一个页面
1.HTML(父页面中存放iframe) <div ><iframe scrolling="no" id="main" name=" ...
问题解决10使用带有框架的页面跳转到登录页面时，登录页面只显示在子框架中，未能铺满整个浏览器--解决方案如下：...
问题描述: 使用带有框架的页面跳转到登录页面时,登录页面只显示在子框架中,未能铺满整个浏览器,例如: 当登录信息过期时,点击左边的菜单栏会让登录页面显示在右边的框架中,而不能铺满整个浏览器解决方案: ...
ionic3 隐藏子页面tabs
看了几天ionic3 问题还挺多的,今天想把所有子页面tabs 给去掉,整了半天,发现app.Module 是可以配置的修改 IonicModule.forRoot(MyApp) imports: ...
子页面应用母版页图片无法显示
今天在做.Net页面时,应用到了母版页,我的母版页在项目的根目录下面,但是我要应用母版页的子页面和母版页不在同一个目录下面.这样导致我在子文件夹里面引用概母版页的时候,原来位于母版页的图片无法显示.首 ...

关于easyUI在子页面增加显示tabs的一个问题

关于easyUI在子

关于easyUI在子页面增加显示tabs的一个问题相关推荐

最新文章

热门文章