首页 技术 正文
技术 2022年11月13日
0 收藏 501 点赞 2,865 浏览 2877 个字

在父页面点个链接能动态看到子页面的情况太简单,请看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弹出另一个子页面,这里是百度。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,090
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,567
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,415
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,187
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,824
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,907