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

简介:

关于easyUI在子

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

 

这样,在子页面点击test add subpage这个链接之后,就会根据传入的url弹出另一个子页面,这里是百度。

 

 

 

页面增加显示tabs的一个问题

目录
相关文章
|
7月前
|
JavaScript 前端开发 Java
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
easyui 只刷新当前页面的数据 datagrid reload 方法
$('#refreshbtn').click(function() { $("#t_auclot").datagrid("reload",serializeForm($('#mysearch'))); });   刷新     easyui  datagrid  re...
3987 0
|
6月前
基于EasyUI的后台管理系统页面原型_示例图_下载地址
基于EasyUI的后台管理系统页面原型_示例图_下载地址
34 0
18EasyUI 布局- 添加自动播放标签页(Tabs)
18EasyUI 布局- 添加自动播放标签页(Tabs)
37 0
17EasyUI 布局- 动态添加标签页(Tabs)
17EasyUI 布局- 动态添加标签页(Tabs)
55 0
|
容器
16EasyUI - 创建标签页(Tabs)
16EasyUI - 创建标签页(Tabs)
45 0
|
JavaScript 前端开发 Java
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
|
JavaScript 前端开发
easyui 后台页面,在Tab中的链接点击后添加一个新TAB的解决方法
1.示例1 新增一个按钮 添加点击事件 onclick="self.parent.addTab('百度','http://www.baidu.com','icon-add')" 如: 打开新TAB 这样点击链接后会增加一个新的TAB     2.
1472 0
|
JavaScript 前端开发 安全
扩展EasyUI在页面中马上显示选中的本地图片
在编写前台页面的时候,有时须要将选中的图片夹杂着其它信息一起上传到服务端,在选着本地图片的时候,为了获得更好的效果,须要将该图片显示在页面上。
2514 0
|
JavaScript
Easyui 页面设置加载完成之后,满屏
js文件: if(top.location!=self.location){ top.location.href=self.location; }
1654 0