:: Forum >> Version 2 >>

Context Menu Script

I wrote this context menu script that enables the developer to add a context menu to any element, launched by any action the developer specify.

One can add it to the page embbed or via a link:
function initContextMenu() {
  
document.write('<div id="contextmenu" class="contextmenu"></div>');
}

function 
writeContextMenu(content) {
  var 
contextMenu document.getElementById("contextmenu");
  
contextMenu.innerHTML content
}

function 
showContextMenu(e) {
  var 
contextMenu document.getElementById("contextmenu");
  
  var 
frameWidthframeHeightpageOffsetXpageOffsetY;
  
  if (
self.clientWidth) {
    
frameWidth self.innerWidth;
        
frameHeight self.innerHeight;
  } else if (
document.documentElement && document.documentElement.clientWidth) {
    
frameWidth document.documentElement.clientWidth;
        
frameHeight document.documentElement.clientHeight;
  } else if (
document.body) {
    
frameWidth document.body.clientWidth;
        
frameHeight document.body.clientHeight;
  }
  
  if (
self.pageXOffset) {
    
pageOffsetX self.pageXOffset;
    
pageOffsetY self.pageYOffset;
  } else if (
document.documentElement && document.documentElement.scrollLeft) {
    
pageOffsetX document.documentElement.scrollLeft;
    
pageOffsetY document.documentElement.scrollTop;
  } else if (
document.body) {
    
pageOffsetX document.body.scrollLeft;
    
pageOffsetY document.body.scrollTop;
  }

  if ((
frameWidth e.clientX) < contextMenu.offsetWidth) {
    
contextMenu.style.left = (pageOffsetX e.clientX contextMenu.offsetWidth) + "px";
  } else {
    
contextMenu.style.left e.clientX "px";
  }

  if ((
frameHeight e.clientY) < contextMenu.offsetHeight) {
    
contextMenu.style.top = (pageOffsetY e.clientY contextMenu.offsetHeight) + "px";
  } else {
    
contextMenu.style.top e.clientY "px";
  }

  
contextMenu.style.visibility "visible";
}

function 
hideContextMenu() {
  if (
document.getElementById("contextmenu")) document.getElementById("contextmenu").style.visibility "hidden";
}

// Write the menu to page
initContextMenu();

// Set the click handler for the page
if (!document.addEventListener){
  
document.attachEvent("onclick"hideContextMenu);
} else {
  
document.addEventListener("click"hideContextMenufalse);
}
 
One should add some CSS styling for the context menu box element:
div.contextmenu {
  
background-color#d0d0d0;
  
border2px solid;
  
border-color#f0f0f0 #909090 #909090 #f0f0f0;
  
left0px;
  
padding0px 1px 1px 0px;
  
positionabsolute;
  
top0px;
  
visibilityhidden;
  
z-index600;
}

div.contextmenu a.menuItem {
  
color#000000;
  
cursor: default;
  
displayblock;
  
padding3px 1em;
  
text-decorationnone;
  
white-spacenowrap;
}

div.contextmenu a.menuItem:hoverdiv.menu a.menuItemHighlight {
  
background-color#000080;
  
color#ffffff;
}

div.contextmenu div.menuItemSep {
  
border-top1px solid #909090;
  
border-bottom1px solid #f0f0f0;
  
margin4px 2px;
}
 
Here is an example of how one can implement it on an ActiveWidgets Version 1 grid:
// set row template
var row = new Active.Templates.Row;
grid.setTemplate("row"row);

// set the contextmenu handler
row.setEvent("oncontextmenu", function(){this.action("contextmenu")});
grid.setAction("contextmenu", function(src){
  
grid.setProperty("selection/index",src.getProperty("item/index"));
  
  var 
contextMenuContent '';
  
  
contextMenuContent += '<a class="menuItem" href="javascript:customFunctionA('+src.getProperty("item/index")+')"><strong>Custom Function A</strong></a>';
  
contextMenuContent += '<a class="menuItem" href="javascript:customFunctionB()">Custom Function B</a>';
  
contextMenuContent += '<div class="menuItemSep"></div>';
  
contextMenuContent += '<a class="menuItem" href="javascript:customFunctionC()">Custom Function C</a>';
  
  
writeContextMenu(contextMenuContent);
  
showContextMenu(event);
}
);
 
It would be appreciated if someone could post an example of how to implement it on a row in an ActiveWidgets Version 2 grid
Neil Craig
Wednesday, June 7, 2006
Here follows an example on how to implement it in Version 2:

function raiseMenuEvent(event){
    
this.raiseEvent("onRowContextMenu"eventthis.$0);
}

grid.getRowTemplate().setEvent("oncontextmenu"raiseMenuEvent);

grid.onRowContextMenu = function(eventrow){
    
grid.setRowSelected(row);

    var 
contextMenuContent '';
  
  
contextMenuContent += '<a class="menuItem" href="javascript:customFunctionA('+row+')"><strong>Custom Function A</strong></a>';
  
contextMenuContent += '<a class="menuItem" href="javascript:customFunctionB()">Custom Function B</a>';
  
contextMenuContent += '<div class="menuItemSep"></div>';
  
contextMenuContent += '<a class="menuItem" href="javascript:customFunctionC()">Custom Function C</a>';
  
  
writeContextMenu(contextMenuContent);
  
showContextMenu(event);

}
 
Neil Craig
Wednesday, June 7, 2006



This topic is archived.

Back to support forum

Forum search