jquery easyui 在子tab頁中打開新tab頁(關於easyUI在子頁面增加顯示tabs的一個問題)

文章轉自:http://breezylee.iteye.com/blog/1762811

在父頁面點個鏈接能動態看到子頁面的情況太簡單，請看easyUI官網：http://www.jeasyui.com/tutorial/layout/tabs2.php
現在說的是在子頁面點個按鈕也能觸發增加子頁面的情況。
情景是，在父頁面上有個div如：

<div class="easyui-tabs" id="main" fit="true" border="false">
　　<div title="Welcome" iconCls="icon-page" style="padding:20px;overflow:hidden;">
　　</div>
</div>

 在子頁面上有個

<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怎麼寫。

 

直接這樣寫是不行的：

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這個函數，這個函數具體出外我忘記了，用法看似是取得整個父頁面對象，正確是寫法：

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
                                    });
             }
        }