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

function Menu()

{

    this.m_Items = [];                  // 菜單條目集合

    this.m_Popup = null;            // 顯示菜單的popup視窗

    this.m_Invalidate = false;     // 是否失效标志

    this.m_Drawn = false;          // 菜單是否已輸出

    this.m_Opener = null;           // 菜單的父視窗window對象

    this.m_ParentMenu = null;  // 菜單的父菜單MenuItem對象

    this.m_ActiveItem = null;     // 被激活(highlighting)的MenuItem

    this.m_ShowTimer = null;   // 滑鼠停留在有子菜單的條目上,子菜單顯示延遲計時器

    this.m_Bounds = null;          // 菜單的bounds

    this.m_ShowHeaderBlank = true; // 是否顯示MenuItem前的空白區域

    this.m_IsEventAttached = false;    // 事件是否attached

    this.m_Id = __MenuCache__.NewId(); // 或取菜單對象的唯一辨別

    __MenuCache__[this.m_Id] = this; // 把菜單放入__MenuCache__

    this.toString = function()

    {

        return '[class Menu]';

    };

}

    菜單類的方法有：

Menu.prototype.Add = function(mi)

    // 添加菜單條目到菜單中

};

Menu.prototype.AddAt = function(mi, index)

    // 把菜單條目添加到指定的數組索引上

Menu.prototype.AddSeparator = function()

    // 添加一個Separator Item,就是我們在window菜單裡的"-"

Menu.prototype.Remove = function(mi)

    // 删除菜單中的一個菜單條目

Menu.prototype.Contains = function(menu)

    // 判斷已建構的菜單中是否已包含了menu

Menu.prototype.Render = function()

    // 生成菜單UI顯示需要的DHTML

Menu.prototype.__generatePaddingTR = function(doc)

    // 為了美化菜單UI生成的一個TR element

Menu.prototype.AttachEvents = function(menu)

    // attach事件處理函數到菜單事件上

Menu.prototype.ActiveItem = function(evt)

    // 處理菜單itme被Active後的UI和動作等

Menu.prototype.Hide = function()

    // 隐藏菜單

Menu.prototype.Keydown = function(evt)

    // 處理鍵盤按鍵

Menu.prototype.Click = function()

    // 執行菜單被click

Menu.prototype.ResumeItem = function(evt)

    // 恢複菜單,取消active和恢複UI

Menu.prototype.__resumeItem = function()

    // 執行UI恢複

Menu.prototype.__resumeAll = function()

    // 執行批量UI恢複

Menu.prototype.__activeItem = function()

    // 執行UI激活

Menu.prototype.HasSubMenuExpanded = function()

    // 判斷菜單是否有展開的submenu

Menu.prototype.__isEllipsis = function(menuObj, menuHtml)

    // 在菜單item的text過長時将截斷并顯示"

"

Menu.prototype.Show = function(evt)

    // 顯示菜單

Menu.prototype.InnerShow = function()

    // 顯示submenu,用于菜單内部觸發的菜單顯示

Menu.prototype.__show = function(miObj)

    // 執行菜單顯示

Menu.prototype.FadeinEffect = function(effect)

    // 菜單顯示式的特效,是用filter來實作,隻在Show菜的時候調用

    類MenuItem比Menu類簡單很多，定義如下：

function MenuItem(text, action, icon, shortcut, menu)

    this.m_Text = text;                // 菜單文本

    this.m_Action = action;        // 菜單條目被觸發時執行的函數

    this.m_Icon = icon;               // 菜單條目前的圖示路徑

    this.m_ChildMenu = menu; // 子菜單,類型為Menu對象

    this.m_Menu = null;              // 本菜單條目所在的菜單對象執行個體

    this.m_ShortCut = shortcut; // 快捷方式(保留,未實作)

    this.m_Disabled = false;      

    this.m_Mnemonic = null;

    this.m_Tooltip = null;

    this.m_Attributes = [];          // 附加屬性集合,由SetAttribute設定

    this.m_Id = __MenuCache__.NewId();

    __MenuCache__[this.m_Id] = this;

        return '[class MenuItem]';

    MenuItem類的方法如下：

MenuItem.prototype.Contains = function(menu)

    // 子菜單中是否已添加menu

MenuItem.prototype.SetAttribute = function(key, value)

    // 設定使用者定義的屬性

MenuItem.prototype.GetAttribute = function(key)

    // 或取使用者定義的屬性

MenuItem.prototype.Invalidate = function()

    // 失效

MenuItem.prototype.IsSeparator = function()

    // 判斷MenuItem是否為Separator,就是其m_Text == '-'

MenuItem.prototype.Render = function()

    // 生成菜單UI的DHTML

MenuItem.prototype.SetBorderColor = function(miHtml, width, borderColor)

    // 設定菜單條目的邊框顔色

    "__"開頭的方法是内部方法，不提供給類外使用。變量命名規則m_開頭的是類屬性變量，Obj結尾的是菜單類對象，和它相對的是Html結尾的，使菜單的HTML元素對象，常見的是menuObj、menuHtml、miObj和miHTML。

    Menu類中最重要的方法是：

    MenuItem主要是處理UI顯示，沒有太重要的方法。 

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