关于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的一个问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/399153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SDN第二次上机作业

1、安装floodlight 2、生成拓扑并连接控制器floodlight&#xff0c;利用控制器floodlight查看图形拓扑 3、利用字符界面下发流表&#xff0c;使得‘h1’和‘h2’ ping 不通 4、利用字符界面下发流表&#xff0c;通过测试‘h1’和‘h3’的联通性&#xff0c;来验证openflow的har…

PHP的钩子实现解析

2019独角兽企业重金招聘Python工程师标准>>> 钩子是编程里一个常见概念&#xff0c;非常的重要。它使得系统变得非常容易拓展&#xff0c;&#xff08;而不用理解其内部的实现机理&#xff0c;这样可以减少很多工作量&#xff09;。只要有一个钩子样本&#xff0c;能…

Beta冲刺! Day2 - 砍柴

Beta冲刺&#xff01; Day2 - 砍柴 今日已完成 晨瑶&#xff1a;大致确定了文章推荐的算法思路&#xff08;Content-based recommender&#xff09;&#xff1b;理清了不少feature的事宜昭锡&#xff1a;修复了日期选择越界时导致程序崩溃和点击光点返回后&#xff0c;日期选择…

Android版添加phonegap--websocket客户端插件教程

2019独角兽企业重金招聘Python工程师标准>>> 1.在Eclipse中新建Android Project项目chatdemo2.把animesh kumar的websocket-android-phonegap项目java文件打成phonegap-websocket-support.jar包&#xff0c;存放在 android project的libs目录下3.把websocket.js存放…

java参数传入的是一个类名_Java编程细节——泛型的定义(类、接口、对象)、使用、继承...

1. 设计泛型的初衷&#xff1a;1) 主要是为了解决Java容器无法记忆元素类型的问题&#xff1a;i. 由于Java设计之初并不知道会往容器中存放什么类型的元素&#xff0c;因此元素类型都设定为Object&#xff0c;这样就什么东西都能放了&#xff01;ii. 但是这样设计有明显的缺点&…

Linux环境下安装部署AWStats日志分析系统实例

AWStats是使用Perl语言开发的一款开放性日志分析系统&#xff0c;可分析Apache网站服务器的访问日志&#xff0c;还可以用来分析Samba、Vsftpd、IIS等日志信息。此文章主要讲解如何在linux系统下安装部署关于对Apache网站服务站日志分析的AWStats。实验步骤一&#xff0c;安装部…

HDU4911 Inversion 解题报告

题意&#xff1a;求逆序对 解题思路&#xff1a;1)树状数组 离散化 解题代码&#xff1a; 1 // File Name: a.cpp2 // Author: darkdream3 // Created Time: 2014年08月05日 星期二 12时05分09秒4 5 #include<vector>6 #include<list>7 #include<map>8 #inc…

springmvc的国际化

1&#xff1a;三个国际化资源文件 i18n.usernameUsername i18n.passwordPassword i18n.username\u7528\u6237\u540D i18n.password\u5BC6\u7801 i18n.usernameUsername i18n.passwordPassword 2&#xff1a;在spring中配置国际化资源文件 <!-- 配置国际化资源文件 --><…

.9-浅析webpack源码之NodeEnvironmentPlugin模块总览

介绍Compiler的构造比较无趣&#xff0c;不如先过后面的&#xff0c;在用到compiler的时候再做讲解。 这一节主要讲这行代码&#xff1a; // 不管这里 compiler new Compiler(); compiler.context options.context; compiler.options options; // 看这里 new NodeEnvironmen…

java单例模式的七种写法_Java设计模式之单例模式的七种写法

什么是单例模式&#xff1f;单例模式是一种常见的设计模式&#xff0c;单例模式的写法有很多种&#xff0c;这里主要介绍三种&#xff1a; 懒汉式单例模式、饿汉式单例模式、登记式单例 。单例模式有以下特点&#xff1a;1、单例类只能有一个实例。2、单例类必须自己创建自己唯…

Struts2国际化

一&#xff1a;简单理解 国际化简称i18n&#xff0c;其来源是英文单词 internationalization的首末字符i 和n。18为中间的字符数。 随着全球经济的一体化&#xff0c;软件开发者应该开发出支持多国语言、国际化的Web应用。对于Web应用来说&#xff0c;同样的页面在不同的语言环…

用Emacs编写mybatis

<?xml version"1.0" encoding"utf-8"?> 用Emacs编写mybatis用Emacs编写mybatis Table of Contents 1. 效果图2. 配置1 效果图 2 配置 现在web开发&#xff0c;最流行的orm框架非mybatis莫属了&#xff0c;它功能强大&#xff0c;编写简单灵活&…

java方法参数

Java程序设计语言总是采用值调用。也就是说&#xff0c;方法得到的是所有参数的一个拷贝&#xff0c;特别是方法不能修改传递给它的任何参数变量的内容。 基本类型参数 1&#xff09;X被初始化为percent值的一个拷贝&#xff1b; 2&#xff09;X被乘以3等于30。但是percent仍然…

SaltStack源码分析之:master端执行salt模块大致流程

2019独角兽企业重金招聘Python工程师标准>>> ##JOB执行流程 先看下官网对于master端的工作流程的介绍&#xff1a; The Salt master works by always publishing commands to all connected minions and the minions decide if the command is meant for them by ch…

myecplise新建Maven项目Filter选什么,使用myeclipse建立maven项目

myecplise新建Maven项目Filter选什么 使用myeclipse建立maven项目 1234567分步阅读maven是管理项目的&#xff0c;myeclipse是编写代码的。第一次写项目都要配置好多东西&#xff0c;很麻烦&#xff0c;now 来看看怎样新建一个maven项目。 工具/原料 myeclipsemaven方法/步骤 1…

关于TCP/IP与数据传输

一、TCP/IP的具体含义&#xff1a; 从字面意思来讲&#xff0c;很多人会认为TCP/IP是指TCP与IP这两种协议。有时确实也可以说是这两种协议&#xff0c;但是大部分情况下所说的是利用IP进行通信时所必须用到的协议群的统称。具体来说IP,ICMP,TCP,UDP,FTP以及HTTP等都属于TCP/IP协…

geohash php_空间索引-geohash算法实现

算法简介geohash是实现空间索引的一种算法,其他实现空间索引的算法有:R树和其变种GIST树、四叉树、网格索引等算法基本原理geohash算法将地球理解为一个二维平面&#xff0c;将平面递归分解成更小的子块&#xff0c;每个子块在一定经纬度范围内拥有相同的编码&#xff0c;这种方…

ActiveReports 报表控件V12新特性 -- 新增JSON和CSV导出

ActiveReports 报表控件V12新特性 -- 新增JSON和CSV导出 ActiveReports 是一款专注于 .NET 平台的报表控件&#xff0c;全面满足 HTML5 / WinForms / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求&#xff0c;作为专业的报表工具为全球超过 300,000 开发人员提…

php imap配置,怎么为PHP编译imap扩展?

为PHP编译imap扩展的方法&#xff1a;首先安装“imap-open2007e”&#xff1b;然后下载源代码&#xff1b;接着准备好系统的“imap-open”环境&#xff1b;最后进入“./ext/extension/imap/”文件夹下执行“make”命令即可。怎么为PHP编译imap扩展&#xff1f;最近为项目增加了…

vmware安装minimal centos报错/etc/rc5.d/s99local : line

2019独角兽企业重金招聘Python工程师标准>>> 有人用vmware安装minimal centos报错/etc/rc5.d/s99local : line:25 : eject : command not found 。我们看下完整报错内容&#xff1a; Installing VMware Tools, please wait...mount: special device /dev/hda does n…