Vous définissez d'abord une "zone" (par exemple un DIV).
Dans la feuille de style CSS :
#mon_div {
margin: 0 auto;
width: 335px;
height: 90px;
}
Dans cet exemple nous avons un DIV auto centré d'une largeur de 335 pixels et d'une hauteur de 90 pixels.
Ce DIV va nous servir de "containeur" pour notre menu.
Dans la page HTML :
<body>
...
<div id="mon_div"></div>
...
</body>
Ensuite nous allons initialiser un composant UI "Menu".
Veuillez insérer le code ci-dessous dans la page HTML après le DIV.
<script type="text/javascript" charset="utf-8">
webix.ui({
container:"mon_div",
view:"menu",
data:[
{ id:"1",value:"Menu 1",
config:{
width:160
},
submenu:[
{id: "option1", value: "Option 1" },
{id: "option2", value: "Option 2" }]},
{ id:"2",value:"Menu 2",
config:{
width:190
},
submenu:[
{id: "option3", value: "Option 3" },
{id: "option4", value: "Option 4" }]}
],
on:{
onMenuItemClick:function(id){
if (this.getMenuItem(id).id == "option1")
// traitement option 1
if (this.getMenuItem(id).id == "option2")
// traitement option 2
if (this.getMenuItem(id).id == "option 3")
// traitement option 3
if (this.getMenuItem(id).id == "option4")
// traitement option 4
}
},
type:{
subsign:true
}
});
</script>
 |
| Exemple de rendu |
Vous pouvez par exemple définir la largeur des options d'un menu (ex : "width:160").
Vous noterez la gestion des options sélectionnées.
Il est possible d'aller plus loin en ajoutant par exemple des sous - menus ou à modifiant le style du menu.
Pour plus d'informations, veuillez consulter la documentation de Webix.
Aucun commentaire:
Enregistrer un commentaire