//get things started
startListener: function(){
//all elemnts
this.attachToTargets(this.targets);

//menu items
this.menu.getElements(‘a’).each(function(item){
item.addEvent(‘click’,function(e){
if(!item.hasClass(‘disabled’)){
this.execute(item.get(‘href’).split(‘#’)[1],document.id(this.options.element));
this.fireEvent(‘click’,[item,e]);
}
}.bind(this));
},this);

//hide on body click
document.id(document.body).addEvents({
‘click’: function(){
this.hide();
}.bind(this),
‘contextmenu’: function(){
this.hide();
}.bind(this)
});
},

// add trigger event to all targets
attachToTargets: function(targets){
targets.each(function(el){
//show the menu
el.addEvent(this.options.trigger,function(e){
//enabled?
if(!this.options.disabled){
//prevent default, if told to
if(this.options.stopEvent) { e.stop(); }
//record this as the trigger
this.options.element = document.id(el);
//calculate height of the menu
menuSize = this.menu.measure(function(){
return this.getSize();
});
//decide where to position the menu
posY = ((e.page.y + this.options.offsets.y + menuSize.y) < window.getSize().y)
? e.page.y + this.options.offsets.y
: e.page.y – this.options.offsets.y – menuSize.y;
posX = ((e.page.x + this.options.offsets.x + menuSize.x) < window.getSize().x)
? e.page.x + this.options.offsets.x
: e.page.x – this.options.offsets.x – menuSize.x;
//position the menu
this.menu.setStyles({
top: posY,
left: posX,
position: 'absolute',
'z-index': '2000'
});
//show the menu
this.show();
}
}.bind(this));
},this);
},

//add item(s)
addItems: function(items){
this.attachToTargets($$(items));
},

//remove item(s)
removeItems: function(items){
$$(items).removeEvents(this.options.trigger);
},

//calculate height of the menu
menuSize = this.menu.measure(function(){
return this.getSize();
});
//decide where to position the menu
posY = ((e.page.y + this.options.offsets.y + menuSize.y) < window.getSize().y)
? e.page.y + this.options.offsets.y
: e.page.y – this.options.offsets.y – menuSize.y;
posX = ((e.page.x + this.options.offsets.x + menuSize.x) < window.getSize().x)
? e.page.x + this.options.offsets.x
: e.page.x – this.options.offsets.x – menuSize.x;
//position the menu
this.menu.setStyles({
top: posY,
left: posX,
position: 'absolute',
'z-index': '2000'
});

I’m attempting to use your contextMenu class yet again but have a question. If I rightclick on a tr (targets: ‘tbody tr’), how do I get the contextmenu to close when I mouseout of the same row? THANKS AGAIN!

imagine you have two spans: (I replaced “” with “@”)

@span class=”mif-tree-name”@ Click me @/span@
@span class=”some-class”@ Click me @/span@

Then if you do as described above, only the first span will have the JS context menu attached; the second one will have browser-default context menu

Regards

Imagine our HTML document has the following two spans:
…
Click me
Click me
….

in your initilaising javascript provide the target in the following format:

targets: ‘span.mif-tree-name’, //menu only available on spans of classs mif-tree-name

then, modify your menu.js so that the “startListener” function is as follows:

//get things started
startListener: function() {
/* all elements */
this.targets.each(function(el) {
// => Array of links with given class. Provide target in the form: ‘a.external’, where ‘external’ is a class name
matchingTargets = $$(el);
/* show the menu */
matchingTargets.addEvent(this.options.trigger,function(e) {
//enabled?
if(!this.options.disabled) {
//prevent default, if told to
if(this.options.stopEvent) { e.stop(); }
//record this as the trigger
this.options.element = $(el);
//position the menu
this.menu.setStyles({
top: (e.page.y + this.options.offsets.y),
left: (e.page.x + this.options.offsets.x),
position: ‘absolute’,
‘z-index’: ’2000′
});
//show the menu
this.show();
}
}.bind(this));
},this);

/* menu items */
this.menu.getElements(‘a’).each(function(item) {
item.addEvent(‘click’,function(e) {
if(!item.hasClass(‘disabled’)) {
this.execute(item.get(‘href’).split(‘#’)[1],$(this.options.element));
this.fireEvent(‘click’,[item,e]);
}
}.bind(this));
},this);

//hide on body click
$(document.body).addEvent(‘click’, function() {
this.hide();
}.bind(this));
},

All the magic is done in these few lines:

/* all elements */
this.targets.each(function(el) {
// => Array of links with given class. Provide target in the form: ‘a.external’, where ‘external’ is a class name
matchingTargets = $$(el);
/* show the menu */
matchingTargets.addEvent(this.options.trigger,function(e) {

Enjoy!

I havent tried it out but I would like to know if this menu can be initialized many times on one page on different objects i.e. on right click, a different menu (with varying links on it) based on which objects is right clicked.

Thanx