-->

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

2020-02-19 07:42发布

要在子页面上面(也就是tab里面)点击一个按钮调用父页面的tabs新增一个tab方法:转自:http://breezylee.iteye.com/blog/1762811。

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

 

 

 

 

标签: