Custom Contextual Menu(content sensitive) : Menu « GUI Components « JavaScript DHTML






Custom Contextual Menu(content sensitive)

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O'Reilly & Associates
     Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Recipe 10.7</title>
<style rel="stylesheet" id="mainStyle" type="text/css">
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
    margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}


</style>
<style type="text/css">
.contextMenus {position:absolute; background-color:#cfcfcf; 
              border-style:solid; border-width:1px; 
              border-color:#EFEFEF #505050 #505050 #EFEFEF; 
              visibility:hidden}
.menuItem {cursor:pointer; font-size:9pt; 
           font-family:Arial, Helvetica, sans-serif; 
           padding-left:5px; color:black; 
           background-color:transparent; 
           text-decoration:none}
.menuItemOn {cursor:pointer; font-size:9pt; 
             font-family:Arial, Helvetica, sans-serif; 
             padding-left:5px; color:red; 
             background-color:yellow; 
             text-decoration:underline}
.contextEntry {font-weight:bold; color:darkred; cursor:pointer}
</style>

<script type="text/javascript">
// context menu data objects
var cMenu = new Object();
cMenu["lookup1"] = {menuID:"contextMenu1", hrefs:["http://www.m-w.com/cgi-bin/dictionary?book=Dictionary&va=sesquipedalian","http://www.m-w.com/cgi-bin/dictionary?book=Thesaurus&va=sesquipedalian"]};
cMenu["lookup2"] = {menuID:"contextMenu2", hrefs:["http://www.wyomingtourism.org/","http://www.pbs.org/weta/thewest/places/states/wyoming/","http://cnn.looksmart.com/r_search?l&izch&pin=020821x36b42f8a561537f36a1&qc=&col=cnni&qm=0&st=1&nh=10&rf=1&venue=all&keyword=&qp=&search=0&key=wyoming","http://google.com","http://search.yahoo.com"]};

// position and display context menu
function showContextMenu(evt) {
    // hide any existing menu just in case
    hideContextMenus();
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) {
        var elem = (evt.target) ? evt.target : evt.srcElement;
         if (elem.nodeType == 3) {
            elem = elem.parentNode;
        }
        if (elem.className == "contextEntry") {
            var menu = document.getElementById(cMenu[elem.id].menuID);
            // turn on IE mouse capture
            if (menu.setCapture) {
                menu.setCapture();
            }
            // position menu at mouse event location
            var left, top;
            if (evt.pageX) {
                left = evt.pageX;
                top = evt.pageY;
            } else if (evt.offsetX || evt.offsetY) {
                left = evt.offsetX;
                top = evt.offsetY;
            } else if (evt.clientX) {
                left = evt.clientX;
                top = evt.clientY;
            }
            menu.style.left = left + "px";
            menu.style.top = top + "px";
            menu.style.visibility = "visible";
            if (evt.preventDefault) {
                evt.preventDefault();
            }
            evt.returnValue = false;
        }
    }
}

// retrieve URL from cMenu object related to chosen item
function getHref(tdElem) {
    var div = tdElem.parentNode.parentNode.parentNode.parentNode;
    var index = tdElem.parentNode.rowIndex;
    for (var i in cMenu) {
        if (cMenu[i].menuID == div.id) {
            return cMenu[i].hrefs[index];    
        }
    }
    return "";
}

// navigate to chosen menu item
function execMenu(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) {
        var elem = (evt.target) ? evt.target : evt.srcElement;
        if (elem.nodeType == 3) {
            elem = elem.parentNode;
        }
        if (elem.className == "menuItemOn") {
            location.href = getHref(elem);
        }
        hideContextMenus();
    }
}

// hide all context menus
function hideContextMenus() {
    if (document.releaseCapture) {
        // turn off IE mouse event capture
        document.releaseCapture();
    }
    for (var i in cMenu) {
        var div = document.getElementById(cMenu[i].menuID)
        div.style.visibility = "hidden";
    }
}

// rollover highlights of context menu items
function toggleHighlight(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) {
        var elem = (evt.target) ? evt.target : evt.srcElement;
        if (elem.nodeType == 3) {
            elem = elem.parentNode;
        }
        if (elem.className.indexOf("menuItem") != -1) {
            elem.className = (evt.type == "mouseover") ? "menuItemOn" : "menuItem";
        }
    }
}

// set tooltips for menu-capable and lesser browsers
function setContextTitles() {
    var cMenuReady = (document.body.addEventListener || typeof document.oncontextmenu != "undefined")
    var spans = document.body.getElementsByTagName("span");
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].className == "contextEntry") {
            if (cMenuReady) {
                var menuAction = (navigator.userAgent.indexOf("Mac") != -1) ? "Click and hold " : "Right click ";
                spans[i].title = menuAction + "to view relevant links"
            } else {
                spans[i].title = "Relevant links available with other browsers (IE5+/Windows, Netscape 6+)."
                spans[i].style.cursor = "default";
            }
        }
    }
}

// bind events and initialize tooltips
function initContextMenus() {
    if (document.body.addEventListener) {
        // W3C DOM event model
        document.body.addEventListener("contextmenu", showContextMenu, true);
        document.body.addEventListener("click", hideContextMenus, true);
    } else {
        // IE event model
        document.body.oncontextmenu = showContextMenu;
    }
    // set intelligent tooltips
    setContextTitles();
}


</script>
</head>
<body onload="initContextMenus()">
<h1>Custom Contextual Menu</h1>
<hr /> 

<p>This sentence has at least one <span id="lookup1" class="contextEntry">sesquipedalian</span> word
and mention of the state of <span id="lookup2" class="contextEntry">Wyoming</span>, both of which could have additional lookups.</p>

<div id="contextMenu1" class="contextMenus" onclick="hideContextMenus()" onmouseup="execMenu(event)" onmouseover="toggleHighlight(event)" onmouseout="toggleHighlight(event)">
<table><tbody>
<tr><td class="menuItem">Merriam-Webster Dictionary</td></tr>
<tr><td class="menuItem">Merriam-Webster Thesaurus</td></tr>
</tbody></table>
</div>

<div id="contextMenu2" class="contextMenus" onclick="hideContextMenus()" onmouseup="execMenu(event)" onmouseover="toggleHighlight(event)" onmouseout="toggleHighlight(event)">
<table><tbody>
<tr><td class="menuItem">Wyoming Tourist Info</td></tr>
<tr><td class="menuItem">State Map</td></tr>
<tr><td class="menuItem">cnn.com</td></tr>
<tr><td class="menuItem">Google</td></tr>
<tr><td class="menuItem">Yahoo Search</td></tr>
</tbody></table>
</div>

</body>
</html>

           
       








Related examples in the same category

1.Application Menubar Example
2.[DOM Menu] :: Example 1 :: Horizontal Menu
3.[DOM Menu] :: Example 2 :: KDE Keramik Style Menu
4.[DOM Menu] :: Example 3: Brainjar.com 'Revenge of the Menubar' Style Menu
5.[DOM Menu] Example 4: Vertical Menu
6.[DOM Menu] :: Example 5 :: Two Menus
7.[DOM Menu] :: Example 6 :: Flash Hiding
8.Menu bar for an inner fake window
9.Fly in Menu item
10.Not too fancy menu with toolbar
11.Drop-Down Menus
12.Menu with sound
13.Menu based on Javascript
14.popup menu (content sensitive menu)
15.Complete Source Code for the Menu
16.Slide out menu
17.Dynamic menu: fly in
18.Menu and submenu
19.Slide out menu with i18N
20.Menu: XP, win 98 style
21.Simple drop-down menu example with layer
22.Build a simple fancy menu
23.Add/delete menu items
24.Customizable layout: customize menu layout
25.Vertical layout menu
26.Easy skinable menu with CSS
27.Menu Item properties
28.Direct link menu
29.Context menu: popup menu
30.Black Menu
31.Dropdown menu