示例: http://yura.thinkweb2.com/scripting/contextMenu/ How to use it Download proto.menu.0.6.js and include it in your page <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/proto.menu.0.6.js"></script> There's an optional CSS file if you do not wish to style menu yourself <link rel="stylesheet" href="proto.menu.0.6.css" type="text/css" media="screen" /> Create an array of links to display in a menu var myMenuItems = [ { name: 'Edit', className: 'edit', callback: function() { alert('Forward function called'); } },{ name: 'Copy', className: 'copy', callback: function() { alert('Copy function called'); } },{ name: 'Delete', disabled: true, className: 'delete' },{ separator: true },{ name: 'Save', className: 'save', callback: function() { alert('Saving...'); } } ] Initialize Proto.Menu class passing array of links <script type="text/javascript"> new Proto.Menu({ selector: '#contextArea', // context menu will be shown when element with id of "contextArea" is clicked className: 'menu desktop', // this is a class which will be attached to menu container (used for css styling) menuItems: myMenuItems // array of menu items }) </script>上面是网站上的,但是这样弄的话,是不会显示菜单的,对比一下官方的源码,在第3步中:改成如下代码:<SCRIPT type=text/javascript>       Element.addMethods({         getNumStyle: function(element, style) {           var value = $(element).getStyle(style);           return value === null ? null : parseInt(value);         }       })       document.observe('dom:loaded', function(){         var myMenuItems = [           {             name: 'New',             className: 'new',             callback: function(e) {               var tagName = e.element().tagName.toLowerCase(),                   x = e.screenX,                   y = e.screenY;               alert('you clicked on <' + tagName + '> element at x: ' + x + ', and y: ' + y);             }           },{             separator: true           },{             name: 'Edit',             className: 'edit',             callback: function() {               alert('Forward function called');             }           },{             name: 'Copy',             className: 'copy',             callback: function() {               alert('Copy function called');             }           },{             name: 'Delete',             disabled: true,             className: 'delete'           },{             separator: true           },{             name: 'Save',             className: 'save',             callback: function() {               alert('Saving...');             }           },{             separator: true           },{             name: 'Save as .xsl',             className: 'xsl',             callback: function() {               alert('Saving as .xsl');             }           },{             name: 'Save as .doc',             className: 'doc',             callback: function() {               alert('Saving as .doc');             }           },{             name: 'Save as .pdf',             className: 'pdf',             callback: function() {               alert('Saving as .pdf');             }           },{             separator: true           },{             name: 'Send to...',             disabled: true,             className: 'send'           }         ]                 new Proto.Menu({           selector: '#desc',           className: 'menu desktop',           menuItems: myMenuItems         })       })     </SCRIPT>这样,右键菜单就出现了。

评论