菜單除了要它能顯示,還要它能執行動作才是最關鍵的地方。popup是個子視窗,雖然他沒有opener。我們有兩種辦法來在popup中執行腳本,一是把script代碼寫到其document中,讓它運作,比如:
var win = window;
var doc = win.document;
var popup = win.createPopup();
var popwin = popup.document.parentWindow;
var popdoc = popwin.document;
popdoc.write('<script>function showAlert(){alert("a");}<' + '/script><div onclick="showAlert()">click me</div>');
popup.show(0, 0, 100, 100);
這樣在彈出的popup中就可以點選"click me"出來一個alert msg box。
另一種方法是使用attachEvent的辦法,這樣popup可以執行其opener視窗中的腳本,比如:
popdoc.write('<div>click me</div>');
var div = popdoc.getElementsByTagName('DIV')[0];
div.attachEvent('onclick', Alert3);
在opener視窗中的scirpt方法:
function Alert3() { alert(3); }
在第二個方法裡有個undocumented的特性,使用attachEvent方法attach的事件響應函數在被觸發時,第一個參數預設就是其window上的event屬性。為什麼說是其視窗上呢?因為popup确實是個具有自己的window對象的元素(雖然我們前面說它比較怪異)。這個特性被極好的使用在了菜單條目被點選時的響應處理上,在後面的Menu.Show()和Menu.ShowEx()裡都回用到。
HTML代碼。這樣的代碼和我們的JavaScript寫的菜單類之間就沒有了任何的聯系,為了把這個聯系重建立立起來,我們使用了一個全局的類似Hashtable的類__MenuCache__來存儲菜單邏輯和UI
var __MenuCache__ =
{
m_Count : 0,
m_IdPrefix : "__MenuObject__",
m_ActiveItem : null,
NewId : function()
{
return this.m_IdPrefix + this.m_Count++;
},
Remove : function(mi)
delete this[mi.m_Id];
}
};
雖然我看了Eric的Menu4的代碼,我隻能說這個__MenuCache__是裡面的亮點,而其他的部分寫的真是有些亂,畢竟他那個Menu類前前後後曆時兩年,其間修複了n多bug。當然我這個Menu的實作自然有些站在巨人肩膀上的味道了
。
Menu
4菜單部分的全部功能(MenuBotton那部分我沒有做,因我目前暫時用不上)。本來我可以簡單的把代碼一發就完事,可能還更受大家歡迎。但我覺得我在這裡詳細的介紹這個PopMenu的實作過程和其間遇到的一些問題,會讓踏實學習的人收獲到更多的東西,同時也督促我自己更加踏實的學習工作。如果能引起讨論氛圍,指出我使用的方法中的錯誤和不足并給予建議,那更是一件讓我開心的事
。
本文轉自部落格園鳥食軒的部落格,原文連結:http://www.cnblogs.com/birdshome/,如需轉載請自行聯系原部落客。