• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
专注于技术,专注于生活
这样才是程序员的生命
博客园    首页    新随笔    联系   管理    订阅  订阅

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

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

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

 


 

 

posted @ 2013-11-05 15:44  錒飛  阅读(690)  评论(1)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3