MenuGenerator

Présentation

MenuGenerator est une classe qui permet de générer un popup menu (pour bouton dropdown ou menu contextuel ou autre) à partir d’une représentation objet.
La structure de l’objet est utilisée pour gérer la création de menus simples ou arborescents.

Exemple d’objet

var menu=[
	{id:"foo", onClick:dojo.hitch(this,function(){alert("foo")}), label : "foo",hidden:true},
	{id:"separator1", label : "-"},
	{id:"submenu1", label : "sub menu 1", subMenuId:"submenu_Sub",
	subMenu : [
		{id:"foobar0", onClick:function() {alert("foobar 0")}, label : "foobar 0", disabled:true},
		{id:"foobaz0", onClick:function() {alert("foobaz 0")}, label : "foobaz 0"}
	]},
	{id:"bar", onClick:function() {alert("bar")}, label : "bar"},
	{id:"submenu2", label : "sub menu 2",
	subMenu : [
		{id:"foobar1", onClick:function() {alert("foobar1")}, label : "foobar1"},
		{id:"foobaz1", onClick:function() {alert("foobaz1")}, label : "foobaz1"}
	]},
	{id:"foobarbaz0", onChange:dojo.hitch(this,function(){alert("foobarbaz1")}), label : "foobarbaz1",checked:true},
	{id:"foobarbaz1", onChange:dojo.hitch(this,function(){alert("foobarbaz2")}), label : "foobarbaz2",checked:false}
];

Description de l’objet

Si la structure de l’objet est utilisée pour gérer l’arborescence du menu, les propriétés permettent de définir le type de menu à créer.
La liste des attributs est le même que pour un sous-objet de dijit.Menu , à savoir :

  • dijit.MenuItem pour les entrées « normale ».
    exemple :

    {id:"foo", onClick:dojo.hitch(this,function(){alert("foo")}), label : "foo",hidden:true}
  • dijit.PopupMenuItem pour les entrées de type « sous menu ».
    exemple :

    {id:"submenu2", label : "sub menu 2",
    subMenu : [
    	//autres menus de type "normaux"
    ]}
  • dijit.CheckedMenuItem pour les entrées avec case à cocher.
    exemple :

    {id:"foobarbaz0", onChange:dojo.hitch(this,function(){alert("foobarbaz1")}), label : "foobarbaz1",checked:true}

Différencier une entrée « sous menu » d’une entrée normale

Pour créer un sous menu, il suffit de préciser dans les attributs de l’objet la propriété subMenu.
Celle-ci est un tableau qui contient les items du sous menu.

Différencier une entrée « case à cocher » d’une entrée normale

Pour spécifier un menu case à coché, vous devez ajouter la propriété checked à votre objet.
A false, vous aurez une case a coché non sélectionnée, à true elle sera sélectionnée.

Propriété spéciale

  • « hidden ». Cette propriété, placé à true permet de cacher l’entrée
  • « id ». Cette propriété est optionnelle. Vous devez le spécifiez si vous avez besoin d’agir sur votre menu après sa création.

Instancier la classe.

sample = new dojox.widget.MenuGenerator({
	menuEntries:menu,
	targetNodeIds:["bind1", "bind2"],
	onOpen:function() {
		console.info("just open menu !");
	}
});

En dehors l’attribut menuEntries qui représente l’objet menu à créer, les autres paramètres sont ceux de dijit.Menu

Exemple et téléchargement

Vous pouvez voir un exemple d’utilisation et télécharger le fichier ici :

http://ben.dojotoolkit-fr.org/test_MenuGenerator.html

Utiliser la classe

Pour que cela fonctionne, placez le fichier téléchargé dans dojox/widget/ et n’oubliez pas le require :

dojo.require("dojox.widget.MenuGenerator");

Track

Ce widget est disponible sur le track de dojo : http://bugs.dojotoolkit.org/ticket/7382

A propos

Technophile passionné par le web, Je travaille actuellement en tant qu'Expert Dojo auprès de la banque ING aux Pays Bas. http://www.linkedin.com/in/santalucia

Publié dans code Tagués avec :

Laisser un commentaire