关于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: ...
随机推荐
- Getting the Device GUID
Sometime you may want to uniquely identify a Windows Phone, such as when you are implementing push n ...
- Crossing River
Crossing River 题目链接:http://acm.hust.edu.cn/vjudge/problem/visitOriginUrl.action?id=26251 题意: N个人希望去过 ...
- 如何设置div的宽度为100%-xx px?
如何设置div的宽度为100%-xx px? 参见如下帖子:http://stackoverflow.com/questions/15183069/div-width-100-10px-relativ ...
- linux卸载mysql,apache,php
卸载Mysql 1.查找以前是否装有mysql 命令:rpm -qa|grep -i mysql 可以看到mysql的包: mysql-3.23.58-9php-mysql-4.3.4-11mod_a ...
- Web前端开发基础 第四课(CSS一些性质)
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...
- java中hashCode方法与equals方法的用法总结
首先,想要明白hashCode的作用,必须要先知道Java中的集合. 总的来说,Java中的集合(Collection)有两类,一类是List,再有一类是Set. 前者集合内的元素是有序的,元素可以重 ...
- BZOJ4443:[SCO2015]小凸玩矩阵
题目大意:给一个N*M的矩阵,选出N个数,使得每行没列只选一个数,求第K大的数的最小值是多少? 二分答案,第k大的数<=x,则有N-k+1个数<=k,用二分图判定. #include< ...
- IOS第12天(2,UINavigationController导航控制器)
****HMAppDelegate.m @implementation HMAppDelegate - (BOOL)application:(UIApplication *)application d ...
- 【iCore3 双核心板_ uC/OS-III】例程四:时间管理
实验指导书及代码包下载: http://pan.baidu.com/s/1pKWKuBT iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- HDU 4287 Intelligent IME(字典树数组版)
Intelligent IME Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...