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