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

会有一股神秘感。 提交于 2020-02-28 05:50:31

在父页面点个链接能动态看到子页面的情况太简单,请看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 = '';   
                $main.tabs('add',{  
                        title:title,  
                        content:content,  
                        closable:true
                    }  
                );  
            }  

 

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

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

Jquery代码
  1. function testAddSubPage(title,url){    
                var jq = top.jQuery;    
    if (jq("#main").tabs('exists', title)){    
                    jq("#main").tabs('select', title);    
                } else {  
                      var content = '';     
                       jq("#main").tabs('add',{    
                                          title:title,    
                                          content:content,    
                                          closable:true
                                        });    
                 }    
            }  

     

     

这样,在子页面点击test add subpage这个链接之后,就会根据传入的url弹出另一个子页面,这里是百度。
本文摘自:http://breezylee.iteye.com/blog/1762811

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!