easyUI在子页面增加显示tabs问题。

野性酷女 2024-02-18 19:41 80阅读 0赞

在父页面点个链接能动态看到子页面的情况太简单，请看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弹出另一个子页面，这里是百度。  
![e0ebc926-0ba5-36e7-856d-7fd5f624d055.jpg][]  
  
![点击查看原始大小图片][fc682c09-e8d0-3cb3-b42b-0ae9eb173953.jpg]

转载：[http://breezylee.iteye.com/blog/1762811][http_breezylee.iteye.com_blog_1762811]

[e0ebc926-0ba5-36e7-856d-7fd5f624d055.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2a1af8cddd304ea383be5c9c5b61242a.png
[fc682c09-e8d0-3cb3-b42b-0ae9eb173953.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0b2b787070df4001bbd61b2d85965831.png
[http_breezylee.iteye.com_blog_1762811]: http://breezylee.iteye.com/blog/1762811