mootoolsベースコンテキストメニュー（右クリックメニュー）
- MooTools ContextMenu Plugin〔コンテキストメニュー〕
MooTools ContextMenu Plugin
コンテキストメニュー
2009/6/20
MooTools ContextMenu Plugin
mootools.js v1.2.1
ブラウザのデフォルトの右クリックを無効にして、カスタムのコンテキストメニューを作成するMootoolsプラグイン。 コンテキストメニュー内の任意の項目やコンテキストメニューの有効化・無効化できるメソッドなど、いくつかのメソッドが用意されています。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>MooTools ContextMenu Plugin | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools.js" ></script>
<script type="text/javascript">
var ContextMenu = new Class({
//implements
Implements: [Options,Events],
//options
options: {
actions: {},
menu: 'contextmenu',
stopEvent: true,
targets: 'body',
trigger: 'contextmenu',
offsets: { x:0, y:0 },
onShow: $empty,
onHide: $empty,
onClick: $empty,
fadeSpeed: 200
},
//initialization
initialize: function(options) {
//set options
this.setOptions(options)
//option diffs menu
this.menu = $(this.options.menu);
this.targets = $$(this.options.targets);
//fx
this.fx = new Fx.Tween(this.menu, { property: 'opacity', duration:this.options.fadeSpeed });
//hide and begin the listener
this.hide().startListener();
//hide the menu
this.menu.setStyles({ 'position':'absolute','top':'-900000px', 'display':'block' });
},
//get things started
startListener: function() {
/* all elemnts */
this.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 = $(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));
},
//show menu
show: function() {
this.fx.start(1);
this.fireEvent('show');
this.shown = true;
return this;
},
//hide the menu
hide: function() {
if(this.shown)
{
this.fx.start(0);
this.fireEvent('hide');
this.shown = false;
}
return this;
},
//disable an item
disableItem: function(item) {
this.menu.getElements('a[href$=' + item + ']').addClass('disabled');
return this;
},
//enable an item
enableItem: function(item) {
this.menu.getElements('a[href$=' + item + ']').removeClass('disabled');
return this;
},
//diable the entire menu
disable: function() {
this.options.disabled = true;
return this;
},
//enable the entire menu
enable: function() {
this.options.disabled = false;
return this;
},
//execute an action
execute: function(action,element) {
if(this.options.actions[action]) {
this.options.actions[action](element,this);
}
return this;
}
});
/* create the menu */
window.addEvent('domready', function() {
var context = new ContextMenu({
targets: '.menu-target',
menu: 'contextmenu',
actions: {
copy: function(element,ref) {
element.setStyle('color','#090');
alert('You selected the element that says: "' + element.get('text') + '." I just changed the color green.');
alert('Disabling the menu to show each individual action can control the menu instance.');
ref.disable();
}
},
offsets: { x: 2, y: 2 }
});
$('enable').addEvent('click',function(e) { e.stop(); context.enable(); alert('Menu Enabled.'); });
$('disable').addEvent('click',function(e) { e.stop(); context.disable(); alert('Menu Disabled.'); });
$('enable-copy').addEvent('click',function(e) { e.stop(); context.enableItem('copy'); alert('Copy Item Enabled.'); });
$('disable-copy').addEvent('click',function(e) { e.stop(); context.disableItem('copy'); alert('Copy Item Disabled.'); });
});
</script>
<style type="text/css">
/* context menu specific */
#contextmenu { border:1px solid #999; padding:0; background:#eee; width:200px; list-style-type:none; display:none; }
#contextmenu .separator { border-top:1px solid #999; }
#contextmenu li { margin:0; padding:0; }
#contextmenu li a { display:block; padding:5px 10px 5px 35px; width:155px; font-size:12px; text-decoration:none; font-family:tahoma,arial,sans-serif; color:#000; background-position:8px 8px; background-repeat:no-repeat; }
#contextmenu li a:hover { background-color:#ddd; }
#contextmenu li a.disabled { color:#ccc; font-style:italic; }
#contextmenu li a.disabled:hover { background-color:#eee; }
/* context menu items */
#contextmenu li a.edit { background-image:url(/content/img/icon/contextmenu/page_white_edit.png); }
#contextmenu li a.cut { background-image:url(/content/img/icon/contextmenu/cut.png); }
#contextmenu li a.copy { background-image:url(/content/img/icon/contextmenu/page_white_copy.png); }
#contextmenu li a.paste { background-image:url(/content/img/icon/contextmenu/page_white_paste.png); }
#contextmenu li a.delete { background-image:url(/content/img/icon/contextmenu/page_white_delete.png); }
#contextmenu li a.quit { background-image:url(/content/img/icon/contextmenu/door.png); }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://davidwalsh.name/mootools-context-menu'>MooTools ContextMenu Plugin</a> | 設置サンプル</h1>
<!-- CODE -->
<div class="menu-target" style="font-weight:bold;color:#f00;">Target - Right Click Here</div>
<br>
<a href="" id="enable">Enable Menu</a> | <a href="" id="disable">Disable Menu</a><br><br>
<a href="" id="enable-copy">Enable "Copy" Item</a> | <a href="" id="disable-copy">Disable "Copy" Item</a>
<ul id="contextmenu">
<li><a href="#edit" class="edit">Edit</a></li>
<li class="separator"><a href="#cut" class="cut">Cut</a></li>
<li><a href="#copy" class="copy">Copy</a></li>
<li><a href="#paste" class="paste">Paste</a></li>
<li><a href="#delete" class="delete">Delete</a></li>
<li class="separator"><a href="#quit" class="quit">Quit</a></li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>