<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0048)http://yura.thinkweb2.com/scripting/contextMenu/ -->
<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Proto.Menu :: prototype based context menu</TITLE>
<META http-equiv=Content-type content="text/html; charset=UTF-8"><LINK
media=screen href="Proto_Menu prototype based context menu_files/reset.css"
type=text/css rel=stylesheet><LINK media=screen
href="Proto_Menu prototype based context menu_files/master.css" type=text/css
rel=stylesheet><LINK media=screen
href="Proto_Menu prototype based context menu_files/proto.menu.0.6.css"
type=text/css rel=stylesheet>
<SCRIPT src="Proto_Menu prototype based context menu_files/prototype_trunk.js"
type=text/javascript></SCRIPT>
<SCRIPT src="Proto_Menu prototype based context menu_files/effects.js"
type=text/javascript></SCRIPT>
<SCRIPT src="Proto_Menu prototype based context menu_files/proto.menu.0.6.js"
type=text/javascript></SCRIPT>
<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>
<META content="MSHTML 6.00.3790.3091" name=GENERATOR></HEAD>
<BODY>
<DIV id=desc>
<H2>Description</H2>
<P>Proto.Menu is a simple and lightweight prototype-based solution for context
menu functionality on your page</P>
<H2>Features:</H2>
<UL>
<LI><SPAN>Lightweight</SPAN>: ~3 KB (~2 KB minified)
<LI><SPAN>Unobtrusive</SPAN>: Plays nice with JS turned off, uses its own
namespace
<LI><SPAN>Cross-browser</SPAN>: Full A-Graded browsers support (Opera is
supported through Ctrl + Left Click)
<LI><SPAN>Fully customizable</SPAN>: Menu styling can (and is intended to) be
easily defined in external stylesheet, supports image-based themes
<LI><SPAN>Fast</SPAN>: Menu container is rendered on page load, and only
changes position when rendered (on click event)
<LI><SPAN>Thoroughly tested:</SPAN> Features extensive set of <A
href="http://proto-menu.googlecode.com/svn/trunk/test/">unit tests</A> to
ensure expected behavior </LI></UL>
<H2>Specification</H2>
<UL>
<LI>Requires: prototype.js 1.6
<LI>Tested browsers: Firefox 1.5+, Internet Explorer 6+, Safari 3+, Opera 9+,
Netscape Navigator 9+
<LI>Last modified on: 12/03/07
<LI>Latest version: 0.6
<LI>Author: <A href="http://thinkweb2.com/projects/prototype/">kangax</A>
</LI></UL>
<H2>SVN</H2>
<UL>
<LI>The extension now has a public <A
href="http://code.google.com/p/proto-menu/">svn (google code)</A> </LI></UL>
<H2>Demo</H2>
<UL>
<LI>Right click anywhere on a page to bring up a menu. Use "Ctrl + Left Click"
if you're in Opera. </LI></UL>
<H2>How to use it</H2>
<OL>
<LI>Download <A title=Proto.Menu
href="Proto_Menu prototype based context menu_files/proto.menu.0.6.js">proto.menu.0.6.js</A>
and include it in your page<BR><PRE class=hl><script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/proto.menu.0.6.js"></script>
</PRE>
<LI>There's an <A title="CSS file for Proto.Menu"
href="Proto_Menu prototype based context menu_files/proto.menu.0.6.css">optional
CSS file</A> if you do not wish to style menu yourself <PRE class=hl><link rel="stylesheet" href="proto.menu.0.6.css" type="text/css" media="screen" />
</PRE>
<LI>Create an array of links to display in a menu<BR><PRE class=hl>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...');
}
}
]
</PRE>
<LI>Initialize Proto.Menu class passing array of links <PRE class=hl><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>
</PRE></LI></OL>
<H2>Version history</H2>
<UL>
<LI><SPAN>v 0.6</SPAN> [12/03/07]
<UL>
<LI>Upgraded to 1.6
<LI>Added iframe shim to prevent <select> elements having higher
z-index than menu (in IE6)
<LI>Added "beforeShow", "beforeHide" and "beforeSelect" callbacks
<LI>Added zIndex option
<LI>Event object is now passed into each callback as a first argument
<LI>It is now possible to assign className to any menu item (useful for
image based themes)
<LI>The menu's markup is now much more semantic and accessible </LI></UL>
<LI><SPAN>v 0.5</SPAN> [8/22/07]
<UL>
<LI>Added Scriptaculous' "fade: true|false" option. When set to true, uses
Effect.Appear when showing a menu container
<LI>Menu now stays within any viewport border
<LI>Added google theme </LI></UL>
<LI><SPAN>v 0.4</SPAN>: [8/19/07]
<UL>
<LI>Completely rewritten to utilize prototype 1.6 (leading to smaller size
with more features)
<LI>Menu item is now an object with following attributes:
<UL>
<LI><STRONG>name:</STRONG> menu item name to display in a menu
<LI><STRONG>callback:</STRONG> function to call on click
<LI><STRONG>disabled:</STRONG> true/false indicating disabled option
<LI><STRONG>separator:</STRONG> true/false indicating separator </LI></UL>
<LI>Menu container now stays within viewport right
右键菜单效果
需积分: 0 47 浏览量
2008-06-30
16:53:52
上传
评论
收藏 44KB RAR 举报
右键菜单.rar （8个子文件） 
右键菜单 Proto_Menu prototype based context menu_files 
reset.css 4KB proto.menu.0.6.css 4KB effects.js 37KB master.css 999B proto.menu.0.6.js 3KB prototype_trunk.js 124KB 右键强.htm 6KB Proto_Menu prototype based context menu.htm 8KB
评论0