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>
関連コンテンツ
TOP / ご利用上の注意点 / リンクについて / RSS
Thanks: Material Design 420 free icons
Follow us on: Twitter, Facebook Page, Google+ Page
©2023 PHP & JavaScript Room All Rights Reserved.