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

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

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

 在子页面上有个

<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怎么写。

 

直接这样写是不行的：

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这个函数，这个函数具体出外我忘记了，用法看似是取得整个父页面对象，正确是写法：

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弹出另一个子页面，这里是百度。

 

 

 

评论

8 楼 ganbo 2016-07-06  

也解决了我的问题,楼主 。。。

7 楼 glw_anubis 2015-07-09  

虽然不明所以,但照着博主的方法确实实现了,谢谢.

6 楼 u011279706 2015-05-20  

非常感谢lz...

5 楼 zweichxu 2014-12-23  

既然你是用iframe来加载子页面的，那在子页面里可以直接引入jquery文件的。
如果在子页面引用了jquery，则在子页面添加tab的话，不需要用top.jQuery来引用父页面的jQuery对象。当然如果子页面用不到jQuery，可以用top.jQuery来引用父页面的jQuery对象。

4 楼 jinglinglei 2014-08-20  

请问var jq = top.jQuery;这句话什么意思，top是什么？

3 楼 hzw2312 2014-03-31  

正确！

2 楼 cr135810 2014-03-27  

正需要这功能呢

1 楼 Scorpiozc 2013-12-14  

正在找解决子页添加tab的方法。