JeuWeb - Crée ton jeu par navigateur
[Javascript] Menu contextuel - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Javascript] Menu contextuel (/showthread.php?tid=2733)

Pages : 1 2


[Javascript] Menu contextuel - Ter Rowan - 11-12-2008

slut, j ai un soucis "d'esthétique" de programmation, c'est à dire que j'ai les moyens de réaliser moi même mon besoin (manipulation de divers tableaux, etc...) mais que je n'aime pas les solutions que j'imagine. Elles fonctionneront mais seront lourdes, etc...

Donc voici mon besoin

le personnage "explore" un site et trouve différentes choses, par exemple :

un pommier (arbre à fruit)
un poirier (arbre à fruit)
un chat sauvage (animal)
un cerf (animal)
une rivière (point d'eau)
un chêne (arbre)

lorsque le joueur clique sur l'icône d'une de ces "choses", un menu contextuel apparaît, ne proposant que les options "pertinentes" pour la sélection.

Par exemple,
si je clique sur un arbre à fruit, j'ai les options "grimper", "couper du bois", "cueillir un fruit"
si je clique sur un animal, j'ai les options "fuir", "chasser", "attraper"
si je clique sur un point d'eau, j'ai les options "pêcher", "se laver", "puiser de l'eau"
si je clique sur un arbre, j'ai les options "grimper", "couper du bois"

Je ne souhaite pas créer autant de menu qu'il y a de "types" de chose mais un seul, qui n'afficherait (display = ....) que les options pertinentes grâce au calcul javascript.

Code PHP :
<?php 
<ul id="monMenu">
<
li id="a1">chasser</li>
<
li id="a2">grimper</li>
<
li id="a3">fuir</li>
<
li id="a4">attraper</li>
<
li id="a5">couper du bois</li>
etc... avec toutes les options
</ul>

je cherche donc à construire la fonction (ou méthode ou...) javascript qui reçoit en paramètre soit la liste des options possibles pour un type identifié, soit le type directement.

pour vous donner une idée de ce que je recherche (dans un contexte pas très éloigné) voici le début "esthétique" d'une méthode "add" que j'ai créée en m'inspirant de diverses choses de mes librairies (ça se trouve y a encore plus beau, n'hésitez pas)

Code PHP :
<?php 
ListePopups
= {

add: function(id, pere, contenu)
{
var
options = Object.extend(
{
titre: '&nbsp;', // si on doit utiliser un titre
classe: 'popup', // si on doit utiliser une classe particulière pour l'ensemble de la popup
classeBarre: 'popup_barre', // si on doit utiliser une classe particulière pour la popupbarre
couleur: null, // si on utilise une couleur de fond particulière pour la popupbarre
drag : true, // si il est possible de lancer un drag
endDrag: null, // si une fonction est appelée à la fin d'un "drag"
endFerme: null, // si une fonction est appelée à la fin d'un "ferme popup"
endPlie: null, // si une fonction est appelée à la fin d'un "plie popup"
plie: true, // si l'option plier existe
cache: true // cache la popup si elle se ferme (utile si on déplace l'objet plutot que de le cacher
}, arguments[3] || { });
pour appeler cette fonction, on n'envoie que les paramètres que l'on souhaite (ou que l'on connait)
Code PHP :
<?php 
ListePopups
.add ("tutu", "titi","blabla", { endPlie: "toto", cache : false} );

je me suis dit au début que c'était une bonne option pour mon problème, donc je vous la présente aussi pour cela mais je fais un blocage imaginatif, je n'arrive pas à avancer, d'où ma demande d'aide Smile

Alors pourquoi utiliser une telle méthode par exemple ? et bien cela évite de lister toutes les actions possibles (avec des true / false) on ne demande que les actions que l'on connait, cela permet une meilleure stabilité du code en cas d'ajout/suppression d'une option

voilà à l'aiiiide Smile


RE: [javascript] menu contextuel - rygnes - 12-12-2008

Je n'aime pas du tout les popup, je vais donc te donner plus particulièrement quelque chose qui me convient (je ne dis pas que c'est mieux même si je le pense fortement ^^).

Dans ta page tu as un menu par exemple :

<p>des objets, images, etc. avec un objet onClick=menuContextuel(this.value)</p>
<p id="menuContexte" ><select id="menuSpecifique"><option></option></select></p>


La feuille de style contient au moins ceci :

#menuContexte{
display:none;
}


function menuContextuel(valeur){

document.getElementById('menuContexte').style.display = 'block';

swicth(valeur){
case 'pommier': //création nouveau formulaire (ou sous une autre formle) et affichage
break;

case 'chat': //idem
break;

//Ainsi de suite...
...
}
}


C'est très fonctionnel, je t'ai donné la logique, à toi de construire quelque chose de propre avec cela.


RE: [Javascript] Menu contextuel - Ter Rowan - 12-12-2008

yop Smile
merci pour ta réponse mais, hélas, cela ne répond pas.

En effet je pense faire un truc du style swtich case

switch type
case : arbre
fonction_menu_global ( les param qui vont bien );
case : point d'eau
fonction_menu_global ( les param qui vont bien 2 );

etc...

mais ce qui ne me va pas dans ta réponse ,c'est que finalement, tu ne fais pas appel à un gestionnaire générique d'événement mais qu'à chaque cas(e) , tu développes ton menu

pas sur d'être clair :heuuu:


RE: [Javascript] Menu contextuel - Karedas - 12-12-2008

Tu peux avoir un div caché

Sur click droit de l'element:

une requete ajax rempli le div avec la liste qui va bien
tu place le div à la position de la souris
tu le fait apparaitre


RE: [Javascript] Menu contextuel - Ter Rowan - 12-12-2008

merci, mais je ne dois vraiment pas être clair ^^

je sais faire (bon j ai bien ramé pour ^^) afficher un menu sous la souris lors du clic, la question est ailleurs Wink

la question est comment définir proprement les options d'un menu générique, faire en sorte que si je rajoute un nouveau type, je n'ai qu'à envoyer les id des options (par exemple) à la fonction générique, que si je rajoute une option, je n'ai qu'à modifier les options des types qui utiliseront cette option mais ne rien faire pour les autres, etc...

que ce soit un menu, ou autre chose revient finalement au même. C'est plus la manipulation des variables javascript le sujet Smile


RE: [Javascript] Menu contextuel - rygnes - 12-12-2008

Effectivement, tu n'es pas très clair.
La fonction que je t'ai proposé est déjà générique.
Cela ne te correspond pas.
Je te donne une autre methode plus proche de ce que tu demandes.

function menuContexte(value){

tabMenu = new Array([menu1],[menu2],[menu3],...);
//Soit un tableau multidimensionnel indicé avec des valeur telles 'pommier', 'poirier' ou indicé numériquement.


//Accès : tabMenu[value]
//affichage du menu générique en fonction du tableau
}


RE: [Javascript] Menu contextuel - Ter Rowan - 13-12-2008

voilà c'est déjà plus cela, mais ce qui me bloque, c'est de ne pas avoir à gérer une grosse maintenance si je rajoute une option au menu ou un type supplémentaire

avec la matrice telle que tu la décris, rajouter un type, c'est rajouter une ligne paramétrant le type, donc on va dire, ça va, par contre rajouter une option, c'est déjà se taper toutes les lignes (les types) pour dire si oui ou non il faut donner l'option à chaque type. J'aimerais trouver un système où je n'ai à déclarer que les options nécessaires à chaque type, pas à me positionner sur les options possibles et les options impossibles.

mais je crois avoir une idée, à fouiller demain, je vous présenterais le résultat Smile


RE: [Javascript] Menu contextuel - rygnes - 13-12-2008

Tu peux toujours utiliser ce système en le couplant avec une liste qui comportera les fonctions communes aux différentes parties.

Cela te convient ?


RE: [Javascript] Menu contextuel - arcanis - 16-12-2008

jContext est parfais pour ce que tu veux en faire, je pense.
Si ce n'est pas le cas, utilise les fonctions createNode et appendChild pour ajouter des lignes manuellement au tableau. Sache qu'il est toujours préférable de manipuler le DOM plutôt que de passer par un sous-fifre tel qu'innerHTML. C'est peut-être plus long, mais c'est beaucoup mieux structuré, au final.
Cependant je te déconseille fortement l'utilisation d'un menu de ce type dans un jeu en ligne, pour cause de chiantise avec le bon navigateur Opera qui à décidé de nous mettre des batons dans les roues en empêchant de désactiver le clic droit avec Javascript. Et donc, au final, tu te retrouve avec ton menu contextuel (glop) et celui d'Opera par dessus (pas glop).


RE: [Javascript] Menu contextuel - Anthor - 16-12-2008

(16-12-2008, 07:51 AM)arcanis a écrit : Sache qu'il est toujours préférable de manipuler le DOM plutôt que de passer par un sous-fifre tel qu'innerHTML.

Aucun intérêt avec jQuery, celui-ci faisant la conversion automatiquement.