このページ内どこでも左クリックでContextMenuが表示されます
以下はこのページのJavaScript
var click = function(type, args){
var list = args[1];
if(list){
document.body.style[list.value.style] = list.value.color;
for(var i=0, item; item=this.getItem(i); i++){
item.cfg.setProperty("checked", false);
}
this.getItem(list.index).cfg.setProperty("checked", true);
}
};
var keydown = function(event){
if(event.shiftKey){
switch(event.keyCode){
case 'R'.charCodeAt(0):
document.body.style.color="red";
break;
case 'B'.charCodeAt(0):
document.body.style.color="blue";
break;
case 'Y'.charCodeAt(0):
document.body.style.color="yellow";
break;
case 'G'.charCodeAt(0):
document.body.style.backgroundColor="gray";
break;
case 'W'.charCodeAt(0):
document.body.style.backgroundColor="white";
break;
}
}
};
var backgroundcolors = [
{text:"灰", value:{style:"backgroundColor", color:"gray"}, helptext:"Shift + G"},
{text:"白", value:{style:"backgroundColor", color:"white"}, helptext:"Shift + W"}
];
var fontcolors = [
{text:"赤", value:{style:"color", color:"red"}, helptext:"Shift + R"},
{text:"青", value:{style:"color", color:"blue"}, helptext:"Shift + B"},
{text:"黄", value:{style:"color", color:"yellow"}, helptext:"Shift + Y"}
];
var init = function(){
var ctxmenu = new YAHOO.widget.ContextMenu('ctxmenu', {
trigger: document,
itemdata: [
{text:"背景", submenu:{id:"ctxmenu1", itemdata: backgroundcolors}},
{text:"フォント", submenu:{id:"ctxmenu2", itemdata: fontcolors}}
]
});
ctxmenu.render(document.body);
var menubar = new YAHOO.widget.MenuBar('menubar', {
itemdata: [
{text:"背景", submenu:{id:"menubar1", itemdata: backgroundcolors}},
{text:"フォント", submenu:{id:"menubar2", itemdata: fontcolors}}
]
});
menubar.render("top");
for(var i=0, item; item=ctxmenu.getItem(i); i++){
item.cfg.getProperty('submenu').clickEvent.subscribe(click);
}
for(var i=0, item; item=menubar.getItem(i); i++){
item.cfg.getProperty('submenu').clickEvent.subscribe(click);
}
YAHOO.util.Event.addListener(document.body, 'keydown', keydown);
};
YAHOO.util.Event.addListener(window, 'load', init);