Sviluppo » Javascript » Internet

Proto.Menu: menu contestuali in Javascript con Prototype 1.6.0

martedì 28 agosto, 2007

Proto.Menu è una semplice e leggera (2Kb) soluzione Javascript  per aggiungere funzionalità di menu contestuali alle pagine HMTL. Questa libreria sfrutta il recente rilascio di prototype 1.6.0_rc0. Le sue caratteristiche essenziali sono:

  • Leggerezza: ~2 KB (~1.5 KB versione ridotta)
  • Unobtrusive: non intrusiva
  • Supporta tutti i browser 
  • Personalizzabile a livello di style-sheet
  • Estremamente veloce 

Per il suo uso è richiesto:

  • prototype.js 1.6.0_rc0
  • provata sui browser: Firefox 1.5+, Internet Explorer 6+, Safari 3+, Opera 9+, Netscape Navigator 9+

Per utilizzarla basta includere la libreria prototype e proto.menu:

Download Proto.Menu.js (o versione compressa)

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

Si possono includere file CSS personalizzati

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

E il suo uso è davvero semplice, si crea un array con i link da mostrare:

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

Si attivano i menu passando il riferimento all'array creato:

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

Notare la proprietà selector che indica l'elemento legato al click per questo menu contestuale.

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , ,

Un commento a: “Proto.Menu: menu contestuali in Javascript con Prototype 1.6.0”

  1. getAvatar 1.0
    28 ago, 2007 University Update - Firefox - Proto.Menu: menu contestuali in Javascript con Prototype 1.6.0:

    [...] YouTube Proto.Menu: menu contestuali in Javascript con Prototype 1.6.0 » This Summary is from an article posted at undolog on Tuesday, August 28, 2007 Tags: Internet, Javascript, Sviluppo Proto.Menu è una semplice e leggera (2Kb) ... : prototype.js 1.6.0_rc0 provata sui browser: Firefox 1.5+, Internet Explorer 6+, Safari 3+, Opera Summary Provided by Technorati.comView Original Article at undolog » 10 Most Recent News Articles About Firefox [...]

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>         // blocco generico
[code][/code]       // blocco generico
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL