天天看點

使用Popup視窗建立無限級Web頁菜單(3)

菜單除了要它能顯示,還要它能執行動作才是最關鍵的地方。popup是個子視窗,雖然他沒有opener。我們有兩種辦法來在popup中執行腳本,一是把script代碼寫到其document中,讓它運作,比如:

使用Popup視窗建立無限級Web頁菜單(3)

    var win = window;

使用Popup視窗建立無限級Web頁菜單(3)

    var doc = win.document; 

使用Popup視窗建立無限級Web頁菜單(3)

    var popup = win.createPopup();

使用Popup視窗建立無限級Web頁菜單(3)

    var popwin = popup.document.parentWindow;

使用Popup視窗建立無限級Web頁菜單(3)

    var popdoc = popwin.document; 

使用Popup視窗建立無限級Web頁菜單(3)
使用Popup視窗建立無限級Web頁菜單(3)

    popdoc.write('<script>function showAlert(){alert("a");}<' + '/script><div onclick="showAlert()">click me</div>'); 

使用Popup視窗建立無限級Web頁菜單(3)

    popup.show(0, 0, 100, 100);

    這樣在彈出的popup中就可以點選"click me"出來一個alert msg box。

    另一種方法是使用attachEvent的辦法,這樣popup可以執行其opener視窗中的腳本,比如:

使用Popup視窗建立無限級Web頁菜單(3)

    popdoc.write('<div>click me</div>'); 

使用Popup視窗建立無限級Web頁菜單(3)

    var div = popdoc.getElementsByTagName('DIV')[0];

使用Popup視窗建立無限級Web頁菜單(3)

    div.attachEvent('onclick', Alert3);

使用Popup視窗建立無限級Web頁菜單(3)
使用Popup視窗建立無限級Web頁菜單(3)

    在opener視窗中的scirpt方法:

使用Popup視窗建立無限級Web頁菜單(3)

     function Alert3() { alert(3); } 

    在第二個方法裡有個undocumented的特性,使用attachEvent方法attach的事件響應函數在被觸發時,第一個參數預設就是其window上的event屬性。為什麼說是其視窗上呢?因為popup确實是個具有自己的window對象的元素(雖然我們前面說它比較怪異)。這個特性被極好的使用在了菜單條目被點選時的響應處理上,在後面的Menu.Show()和Menu.ShowEx()裡都回用到。

HTML代碼。這樣的代碼和我們的JavaScript寫的菜單類之間就沒有了任何的聯系,為了把這個聯系重建立立起來,我們使用了一個全局的類似Hashtable的類__MenuCache__來存儲菜單邏輯和UI

使用Popup視窗建立無限級Web頁菜單(3)

     var __MenuCache__ =

使用Popup視窗建立無限級Web頁菜單(3)

     {

使用Popup視窗建立無限級Web頁菜單(3)

         m_Count :        0,

使用Popup視窗建立無限級Web頁菜單(3)

         m_IdPrefix :    "__MenuObject__",

使用Popup視窗建立無限級Web頁菜單(3)

         m_ActiveItem : null,

使用Popup視窗建立無限級Web頁菜單(3)
使用Popup視窗建立無限級Web頁菜單(3)

         NewId : function()

使用Popup視窗建立無限級Web頁菜單(3)

         {

使用Popup視窗建立無限級Web頁菜單(3)

             return this.m_IdPrefix + this.m_Count++;

使用Popup視窗建立無限級Web頁菜單(3)

         },

使用Popup視窗建立無限級Web頁菜單(3)
使用Popup視窗建立無限級Web頁菜單(3)

         Remove : function(mi)

使用Popup視窗建立無限級Web頁菜單(3)
使用Popup視窗建立無限級Web頁菜單(3)

             delete this[mi.m_Id];

使用Popup視窗建立無限級Web頁菜單(3)

         }

使用Popup視窗建立無限級Web頁菜單(3)

     };

    雖然我看了Eric的Menu4的代碼,我隻能說這個__MenuCache__是裡面的亮點,而其他的部分寫的真是有些亂,畢竟他那個Menu類前前後後曆時兩年,其間修複了n多bug。當然我這個Menu的實作自然有些站在巨人肩膀上的味道了

使用Popup視窗建立無限級Web頁菜單(3)

Menu

4菜單部分的全部功能(MenuBotton那部分我沒有做,因我目前暫時用不上)。本來我可以簡單的把代碼一發就完事,可能還更受大家歡迎。但我覺得我在這裡詳細的介紹這個PopMenu的實作過程和其間遇到的一些問題,會讓踏實學習的人收獲到更多的東西,同時也督促我自己更加踏實的學習工作。如果能引起讨論氛圍,指出我使用的方法中的錯誤和不足并給予建議,那更是一件讓我開心的事

使用Popup視窗建立無限級Web頁菜單(3)

。  

本文轉自部落格園鳥食軒的部落格,原文連結:http://www.cnblogs.com/birdshome/,如需轉載請自行聯系原部落客。  

繼續閱讀