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

文章转自:http://breezylee.iteye.com/blog/1762811

在父页面点个链接能动态看到子页面的情况太简单，请看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>  

 在子页面上有个

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.       

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

 

直接这样写是不行的：

Js代码  

1. function testAddSubPage(title,url){  
2.               
3.             var parentMain = window.parent.document.getElementById("main");  
4.               
5.             var $main = $(parentMain);  
6.               
7.             var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';   
8.             $main.tabs('add',{  
9.                     title:title,  
10.                     content:content,  
11.                     closable:true  
12.                 }  
13.             );  
14.               
15.         }  

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

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

Java代码  

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.         }