/*
     Sample:
        
            document.body.oncontextmenu = function() {
                if (!window.mnuPopup) {
                    window.mnuPopup = new js_PopupMenu();
                    window.mnuPopup.add("Open");
                    window.mnuPopup.add("Delete", "func2()", true, "icon2.gif");
                    window.mnuPopup.insertBefore("Delete", "Edit");
                    window.mnuPopup.insertAfter("Edit", "Search", "func4()", true);
                    window.mnuPopup.enable("Open", true);
                    window.mnuPopup.enableAll(true);
                    window.mnuPopup.modify("Edit", "Edit1", "func1()", false, "icon1.gif");
                }
                
                if (window.mnuPopup) window.mnuPopup.show();
                // or: window.mnuPopup.show(100, 200);
                
                return false;
            }
 */
 
function js_MenuItem(caption, action, enabled, icon) {
    this.caption = caption ? caption : "MenuItem";
    this.action  = (action && action != "") ? action : "void(0);";
    this.enabled = (enabled != 'undefined' && enabled != 'null') ? enabled : true;
    this.icon    = (icon && icon != "undefined" && icon != "") ? icon : null;
}function js_PopupMenu() {
    this.items     = new Array();
    this.menuPopup = window.createPopup();
    this.isCreated = false;
    this.itemCount = 0;
    this.sepCount  = 0;
    
    // dirty()
    this.dirty = function() {
        if (this.isCreated) {
            this.isCreated = false;
            this.itemCount = 0;
            this.sepCount  = 0;
        }
    }
    
    // add()
    this.add = function(caption, action, enabled, icon) {
        this.items[this.items.length] = new js_MenuItem(caption, action, enabled, icon);
        this.dirty();
    }    // insertBefore()
    this.insertBefore = function(from_caption, caption, action, enabled, icon) {
        for (var i = 0; i < this.items.length; i++) {
            if (this.items[i].caption == from_caption) {
                for (var j = this.items.length; j > i; --j) {
                    this.items[j] = this.items[j - 1];
                }
                this.items[i] = new js_MenuItem(caption, action, enabled, icon);
                this.dirty();
                return true;
            }
        }
        return false;
    }    // insertAfter()
    this.insertAfter = function(from_caption, caption, action, enabled, icon) {
        for (var i = 0; i < this.items.length; i++) {
            if (this.items[i].caption == from_caption) {
                for (var j = this.items.length; j > i + 1; --j) {
                    this.items[j] = this.items[j - 1];
                }
                this.items[i + 1] = new js_MenuItem(caption, action, enabled, icon);
                this.dirty();
                return true;
            }
        }
        return false;
    }    // remove()
    this.remove = function(caption) {
        for (var i = 0; i < this.items.length; i++) {
            if (this.items[i].caption == caption) {
                for (var j = i; j < this.items.length; ++j) {
                    this.items[j] = this.items[j + 1];
                }
                this.items.length--;
                this.dirty();
                return true;
            }
        }
        return false;
    }
    
    // modify()
    this.modify = function(caption, new_caption, new_action, new_enabled, new_icon) {
        if (caption.charAt(0) == "-") return;
        for (var i = 0; i < this.items.length; i++) {
            if (this.items[i].caption == caption) {
                if (new_caption && this.items[i].caption != new_caption) {
                    this.items[i].caption = new_caption; this.dirty();
                }
                if (new_action && this.items[i].action != new_action) {
                    this.items[i].action = new_action; this.dirty();
                }
                if (new_enabled != null && new_enabled != 'undefined' && this.items[i].enabled != new_enabled) {
                    this.items[i].enabled = new_enabled; this.dirty();
                }
                if (new_icon && this.items[i].icon != new_icon) {
                    this.items[i].icon = new_icon; this.dirty();
                }
                break;
            }
        }
    }
    
    // enabled()
    this.enabled = function(caption, enabled) {
        if (caption.charAt(0) == "-") return;
        for (var i = 0; i < this.items.length; i++) {
            if (this.items[i].caption == caption && this.items[i].enabled != enabled) {
                this.items[i].enabled = enabled;
                this.dirty();
                break;
            }
        }
    }
    
    // enabledAll()
    this.enabledAll = function(enabled) {
        for (var i = 0; i < this.items.length; i++) {
            if (caption.charAt(0) != "-" && this.items[i].enabled != enabled) {
                this.items[i].enabled = enabled;
                this.dirty();
            }
        }
    }
    
    // create()
    this.create = function() {
        if (this.isCreated) return;
        this.itemCount = this.sepCount = 0;
        var menuContent = "<table width=160 border=0 cellspacing=0 cellpadding=0 unselectable='on' tabindex='-1' style='font-size:9pt;font:menu;color:menutext;cursor:default' onselectstart='return false;' oncontextmenu='return false;'>";
        menuContent += "<col width=18 unselectable='on' align=center style='font-size:9pt;'><col width=130 unselectable='on' style='font-size:9pt;'>";
        for (var i = 0; i < this.items.length; i++) {
            if (!this.items[i].caption) continue;
            if (this.items[i].caption.charAt(0) == "-") {
                menuContent += "<tr><td height=8 colspan=2 align=center' unselectable='on'><label style='width:100%;border:inset 1px highlighttext;height:2px' size=1></span></td></tr>";
                this.sepCount++;
            } else {
                this.itemCount++;
                if (this.items[i].enabled) {
                    menuContent += "<tr onMouseOver='this.style.backgroundColor=\"highlight\";this.style.color=\"highlighttext\";' ";
                    menuContent += "onMouseOut='this.style.backgroundColor=\"buttonface\";this.style.color=\"menutext\";' ";
                    menuContent += "onClick='parent.eval(\"" + this.items[i].action + "\");this.style.backgroundColor=\"buttonface\";this.style.color=\"menutext\";window.blur();'>";
                    if (!this.items[i].icon) menuContent += "<td></td>"; else menuContent += "<td><img src='" + this.items[i].icon + "' width=16 height=16></td>";
                    menuContent += "<td height=18>" + this.items[i].caption + "</td></tr>";
                } else {
                    if (!this.items[i].icon) menuContent += "<td disabled='disabled'></td>"; else menuContent += "<td disabled='disabled'><img src='" + this.items[i].icon + "' width=16 height=16></td>";
                    menuContent += "<td height=18 disabled='disabled'>" + this.items[i].caption + "</td></tr>";
                }
            }
        }
        menuContent += "</table>";  
    
        this.menuPopup.document.body.innerHTML = menuContent;
        this.menuPopup.document.body.style.border = "outset 2px buttonhighlight" ;
        this.menuPopup.document.body.style.backgroundColor = "buttonface" ;
        
        this.isCreated  = true;
    }
    
    // show()
    this.show = function(x, y, target) {
        if (!this.isCreated) this.create();
        if (isNaN(x)) x = event.clientX;
        if (isNaN(y)) y = event.clientY;
        if (!target) target = document.body;
        this.menuPopup.show(x, y, 165, this.itemCount*18 + this.sepCount*8 + 5, target);
        return false;
    }
}

解决方案 »

  1.   

    修正一下// enabledAll() 中
    this.items[i].caption.charAt(0) != "-"举例中是
     window.mnuPopup.enabled("Open", true);
     window.mnuPopup.enabledAll(true);
      

  2.   

    分割条,以第一个字母为 "-" 为准。
    window.mnuPopup.add("-");
    window.mnuPopup.add("-9");
    window.mnuPopup.add("-99");
      

  3.   

    回复人: cuixiping(无心)
    =================================
    50行代码就可以搞定的,怎么这么长
    看你提供的接口数量了