关于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代码
.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
. }
. );
.
. }
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弹出另一个子页面,这里是百度。
关于easyUI 的tabs 在子页面增加显示tabs的一个问题的更多相关文章
- 关于easyUI在子页面增加显示tabs的一个问题
在父页面点个链接能动态看到子页面的情况太简单,请看easyUI官网:http://www.jeasyui.com/tutorial/layout/tabs2.php 现在说的是在子页面点个按钮也能触发 ...
- easyui 在子tabs中打开新tabs(关于easyUI在子页面增加显示tabs的一个问题)
现在说的是在子页面点个按钮也能触发增加子页面的情况. 情景是,在父页面上有个div如: <div class="easyui-tabs" id="main" ...
- EasyUI-子页面增加显示tabs的一个问题
在父页面点个链接能动态看到子页面的情况太简单,请看easyUI官网:http://www.jeasyui.com/tutorial/layout/tabs2.php现在说的是在子页面点个按钮也能触发增 ...
- 通过easyui tab添加的子页面JS脚本必须放在body才生效
通过easyui tab添加的子页面JS脚本必须放在body才生效 可通过Chrome查看元素时,head标签是否含有你自己写的JS代码
- 解决页面使用ifrmae后,在session失效后登录页面在子页面中显示(子窗体出现父窗体)
在登录页面中添加js判断当前页面是否是父页面,诺不是则父页面跳转至登录页面. <script type="text/javascript"> //解决登录后多个父窗体问 ...
- Ionic01 简单介绍、环境搭建、创建项目、项目结构、创建组件、创建页面、子页面跳转
1 Ionic 基本介绍 Ionic 是一款基于 Angular.Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一个跨平台的移动应用.可以快速开发移动 App.移动端 WEB ...
- URL传递的参数是UTF-8编码,在打开的页面正常显示(GB2312)的方法
URL传递的参数采用的是UTF-8编码,在打开的子页面中显示乱码, URL传递的地址形如:http://localhost/test.aspx?orgname=%E5%8B%**%**%**%**&a ...
- ionic2 子页面隐藏去掉底部tabs导航,子页面全占满显示方法(至今为止发现的最靠谱的方法)
项目中遇到 tabs 字页面 可以用以下代码隐藏的方式: imports: [ BrowserModule, // IonicModule.forRoot(MyApp), HttpModule, Io ...
- ionic3 隐藏子页面tabs
看了几天ionic3 问题还挺多的,今天想把所有子页面tabs 给去掉,整了半天,发现app.Module 是可以配置的 修改 IonicModule.forRoot(MyApp) imports: ...
随机推荐
- [转载]对于GetBuffer() 与 ReleaseBuffer() 的一些分析
先 转载一段别人的文章 CString类的这几个函数, 一直在用, 但总感觉理解的不够透彻, 不时还有用错的现象. 今天抽时间和Nico一起分析了一下, 算是拨开了云雾: GetBuffer和Rele ...
- javascript平时小例子③(setInterval使用1)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 了解C++默认编写并调用哪些函数
概念:编译器可以暗自为class创建default构造函数.copy构造函数.copy assignmengt构造函数,以及析构函数. 比如你写下:struct Node { }; 这就好像你写下这样 ...
- MacPort 的使用
MacPorts 的安装和使用 官网下载最版本的 安装包 自动安装 可能会出现很慢的情况 设置环境变量 vim ~/.bash_profile i 插入修改 :wq 保 ...
- window svn backup.bat
help command /? call /? %cd% 可以用在批处理文件中,也可以用在命令行中:展开后,是驱动器盘符:+当前目录,如在dos窗口中进入c:\dir目录下面, %0代指批处理文件自身 ...
- Eclipse 官方简体中文语言包下载地址及安装方法
Eclipse 官方简体中文语言包下载地址及安装方法 打开Eclipse Babel Project 主页: http://www.eclipse.org/babel/downloads.php 根据 ...
- Python2.x和3.x主要差异总结
本文部分转载自http://my.oschina.net/chihz/blog/123437,部分来自自身修改 开始使用Python之后就到处宣扬Python如何如何好,宣传工作的一大重要诀窍就是做对 ...
- IOS第七天(6:UiTableView编辑模式, 拖动位置 ,滑动删除)
**********UiTableView编辑模式, 拖动位置 ,滑动删除 #import "HMViewController.h" @interface HMViewContro ...
- go gomail
package main //cmd: go get gopkg.in/gomail.v1 import ( "gopkg.in/gomail.v1" ) func main() ...
- 蓝牙—RFCOMM协议
RFCOMM是一个简单的协议,其中针对9针RS-232串口仿真附加了部分条款.可支持在两个蓝牙设备之间同时保持高达60路的通信连接.RFCOMM的目的是针对如何在两个不同设备上的应用之间保证一条完整的 ...