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

Html代码

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

在子页面上有个

Html代码 
1.<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="testAddSubPage('new tab','http://www.baidu.com')">test add subpage</a>    
2.     
<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
. }
. );
.
. }
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这个函数,这个函数具体出外我忘记了,用法看似是取得整个父页面对象,正确是写法:

asp.net代码 
1.function testAddSubPage(title,url){    
2.              
3.            var jq = top.jQuery;    
4.        
5.            if (jq("#main").tabs('exists', title)){    
6.                jq("#main").tabs('select', title);    
7.            } else {  
8.                  var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';     
9.                   jq("#main").tabs('add',{    
10.                                      title:title,    
11.                                      content:content,    
12.                                      closable:true    
13.                                    });    
14.             }    
15.        }   
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弹出另一个子页面,这里是百度。

关于easyUI 的tabs 在子页面增加显示tabs的一个问题的更多相关文章

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

    在父页面点个链接能动态看到子页面的情况太简单,请看easyUI官网:http://www.jeasyui.com/tutorial/layout/tabs2.php 现在说的是在子页面点个按钮也能触发 ...

  2. easyui 在子tabs中打开新tabs(关于easyUI在子页面增加显示tabs的一个问题)

    现在说的是在子页面点个按钮也能触发增加子页面的情况. 情景是,在父页面上有个div如: <div class="easyui-tabs" id="main" ...

  3. EasyUI-子页面增加显示tabs的一个问题

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

  4. 通过easyui tab添加的子页面JS脚本必须放在body才生效

    通过easyui tab添加的子页面JS脚本必须放在body才生效 可通过Chrome查看元素时,head标签是否含有你自己写的JS代码

  5. 解决页面使用ifrmae后,在session失效后登录页面在子页面中显示(子窗体出现父窗体)

    在登录页面中添加js判断当前页面是否是父页面,诺不是则父页面跳转至登录页面. <script type="text/javascript"> //解决登录后多个父窗体问 ...

  6. Ionic01 简单介绍、环境搭建、创建项目、项目结构、创建组件、创建页面、子页面跳转

    1 Ionic 基本介绍 Ionic 是一款基于 Angular.Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一个跨平台的移动应用.可以快速开发移动 App.移动端 WEB ...

  7. URL传递的参数是UTF-8编码,在打开的页面正常显示(GB2312)的方法

    URL传递的参数采用的是UTF-8编码,在打开的子页面中显示乱码, URL传递的地址形如:http://localhost/test.aspx?orgname=%E5%8B%**%**%**%**&a ...

  8. ionic2 子页面隐藏去掉底部tabs导航,子页面全占满显示方法(至今为止发现的最靠谱的方法)

    项目中遇到 tabs 字页面 可以用以下代码隐藏的方式: imports: [ BrowserModule, // IonicModule.forRoot(MyApp), HttpModule, Io ...

  9. ionic3 隐藏子页面tabs

    看了几天ionic3 问题还挺多的,今天想把所有子页面tabs 给去掉,整了半天,发现app.Module 是可以配置的 修改 IonicModule.forRoot(MyApp) imports: ...

随机推荐

  1. Git初使用

    今天开始初次使用Git,Git作为一个使用广泛的分布式版本控制系统,我们有必要熟悉掌握. 这次主要是实现将本地上的“Hello World”的完整的项目文件提交到github上新建的代码库,主要过程如 ...

  2. WinForm 窗体属性

    WinForm - C/S 客户端     B/S 网页端 客户端应用程序 - 是需要安装在用户电脑上才可以使用的程序特点:不需要联网也可以打开使用部分功能但是现在的情况是许多功能依然需要互联网的支持 ...

  3. tab1

    <html> <head> <meta charset="UTF-8"> <title>tab</title> < ...

  4. POJ3468 线段树(区间更新,区间求和,延迟标记)

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 97196   ...

  5. bootstrap学习笔记之四(javascript插件)

    下面展现四个插件的用法,一般插件的功能可以用两种方法实现,一种是引入bootstrap.js后,通过添加data属性实现,另一种则是通过js代码是实现. 第一个插件:下拉菜单的实现 第一种方法:dat ...

  6. sizeof运算符和strlen函数的区别

    1.sizeof是运算符,而strlen是函数. 2.sizeof操作符的运算结果为size_t,他在头文件中的typedef为unsigned int.该类型保证能容纳所操作对象的最大字节大小. 3 ...

  7. 一个人的旅行-Floyd

    一个人的旅行 Time Limit : 1000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submis ...

  8. IOS第二天多线程-02一次性代码

    ********** #import "HMViewController.h" #import "HMImageDownloader.h" @interface ...

  9. Codeforces Round #350 (Div. 2) D2 二分

    五一期间和然然打的团队赛..那时候用然然的号打一场掉一场...七出四..D1是个数据规模较小的题 写了一个暴力过了 面对数据如此大的D2无可奈何 现在回来看 一下子就知道解法了 二分就可以 二分能做多 ...

  10. css中width的计算方式,以及width:100%的参考系

    PS:测试浏览器均为chrome. 首先说下负margin的影响. 正常html页面在显示时,默认是根据文档流的形式显示的.文档流横向显示时,会有一个元素横向排列的基准线,并且以最高元素的vertic ...