Proto.Menu: Context menus in JavaScript with Prototype 1.6.0

Proto.Menu is a simple and lightweight (2Kb) solution for JavaScript to add functionality to the context menus HMTL pages. This library uses the recent release of Prototype 1.6.0_rc0 . Its main features are:

  • Lightness: ~ 2 KB (~ 1.5 MB version)
  • Unobtrusive: not intrusive
  • Supports all browsers
  • Customizable in terms of style-sheet
  • Extremely fast

For its use is required:

  • prototype.js 1.6.0_rc0
  • Proven on the browsers: Firefox 1.5 +, Internet Explorer 6 +, Safari 3 +, Opera 9 +, Netscape Navigator 9 +

To use it simply include the library and prototype proto.menu:

Download Proto.Menu.js (or compressed version )

1
2
"text/javascript" src = "js/prototype.js" >< / script > < script type = "text / javascript" src = "js / prototype.js"> </ script >
"text/javascript" src = "js/Proto.Menu.js" >< / script > < script type = "text / javascript" src = "js / Proto.Menu.js"> </ script >

You can include your own CSS file

1
"stylesheet" href = "Proto.Menu.css" type = "text/css" media = "screen" / > < link rel = "stylesheet" href = "Proto.Menu.css" type = "text / css" media = "screen" />

And its use is really simple, you create an array with links to show:

1
2
3
4
5
6
7
8
9
10
11
[ var myLinks = [
: 'Back' , callback : function ( ) { alert ( 'back function called' ) } } , {Name: 'Back', callback: function () {alert ('Called back function')}},
: 'Forward' , callback : function ( ) { alert ( 'Forward function called' ) } } , {Name: 'Forward', callback: function () {alert ('Forward function Called')}},
true } , {Separator: true},
: 'Reload' , callback : function ( ) { alert ( 'Reload function called' ) } } , {Name: 'Reload', callback: function () {alert ('Reload Called function')}},
: 'Disabled option' , disabled : true } , {Name: 'Disabled option', disabled: true},
: 'Toggle previous option' , callback : function ( ) { {Name: 'Toggle previous option', callback: function () {
= oLinks. find ( function ( l ) { return l. name == 'Disabled option' } ) ; var item = oLinks. find (function (s) {return l. name == 'Disabled option'});
= item . disabled == false ? true : false ; item. disabled = item. disabled == false? true: false;
}}
]

Menus are activated by passing the reference to the array created:

1
2
3
4
5
6
7
"text/javascript" > < script type = "text / javascript">
new Proto.Menu ({
selector: '. contextmenu' / / context menu will be shown When element with class name of "contextmenu" is clicked
className: 'myContextMenu', / / ​​this is a class Which will be attached to menu container (used for css styling)
menuitems: myLinks / / array of menu items
})
</ script >

Note the property selector indicates that the element related to the click context menu for this.

Comment on: "Proto.Menu: Context menus in JavaScript with Prototype 1.6.0"

  1. August 28, 2007 University Update - Firefox - Proto.Menu: Context menus in JavaScript with Prototype 1.6.0 :

    [...] YouTube Proto.Menu: Context menus in JavaScript with Prototype 1.6.0 »This Summary is from an article posted at undolog on Tuesday, August 28, 2007 Tags: Internet, Javascript, Development Proto.Menu is a simple and light (2Kb) ...: prototype.js 1.6.0_rc0 tested on browsers: Firefox 1.5 +, Internet Explorer 6 +, Safari 3 +, Opera Summary Provided by Technorati.comView at undolog Original Article »10 Most Recent News Articles About Firefox [. ..]

Leave a comment

TAG XHTML PERMITS: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL


Stop SOPA