[Javascript] Menu contextuel - Version imprimable

[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

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

ou d'autres

mais que ce soit jquery ou prototype (que j'utilise), au final si on fouille dans le code, on se retrouve avec du innerhtml (pour jquery, je me base sur un souvenir, je crois que c'était Sephi qui répondait à mon sujet innerhtml sur prototype ^^)

mais ne vous inquiétez pas j'utilise les appenchild (ou leurs équivalents librairies) pour tout déplacement dans le dom,

j'utilise très rarement le inner en direct pour la création plutot la librairie, mais ça revient au même.

quant au menu, seul événement, le clic gauche, donc, ça ne devrait pas poser de problème.

je suis à la bourre sur le sujet, je voulais poster le résultat samedi, mais pas eu le temps de tester...

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

Citation :mais que ce soit jquery ou prototype (que j'utilise), au final si on fouille dans le code, on se retrouve avec du innerhtml

Oui mais c'est mal c'est tout cracra et caypasbo xD
J'exagère peut-être un piti peu mais dans l'ensemble l'idée y est.

Arcanis l'extremiste du javascript

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

alorsse... j ai changé de nombreuses fois d'avis et voilà ce que ça donne. Je suis assez content de mon truc même si je me demande si je suis bien dans la "règle" de séparation fond / forme... enfin à voir

déjà, mon menu contextuel est désormais construit ainsi

Code PHP :
<?php 

<div id="menuItemAction" class="cache"> 

<ul class="ress_a">

  <a href='#item'><li id='act_1' class="ress_v">attaquer</li></a>

  <a href='#item'><li id='act_2' class="ress_v">capturer</li></a>

  <a href='#item'><li id='act_3' class="ress_a">couper du bois</li></a>

  <a href='#item'><li id='act_4' class="ress_f">cueillir des fruits</li></a>

  <a href='#item'><li id='act_5' class="ress_a">cueillir des feuilles</li></a>

  <a href='#item'><li id='act_6' class="ress_p ress_o ress_m">ramasser</li></a>

</ul>

</div>

on constate que chaque li possède une ou plusieurs classes. Ces classes correspondent au type de ressources pouvant être soumise à l action

exemple . ramasser est pertinent pour les plantes (p), les objets(o) et les minéraux (m) mais pas pour les être vivants (v) ni pour les abres (a)

maintenant le css

Code PHP :
<?php 

menuItemAction

{

  background : #FFFFD4;

}

#menuItemAction ul

{

  padding : 1px;

  margin : 0;

}

#menuItemAction ul li

{

  text-align : left;

  display : none;

}

#menuItemAction ul li a

{

  width : 100%;

}

#menuItemAction ul li a:hover

{

  background : #DFDFB4;

}

#menuItemAction ul.ress_a li.ress_a

{

  display : block;

}

#menuItemAction ul.ress_v li.ress_v

{

  display : block;

}

#menuItemAction ul.ress_p li.ress_p

{

  display : block;

}

#menuItemAction ul.ress_m li.ress_m

{

  display : block;

}

#menuItemAction ul.ress_f li.ress_f

{

  display : block;

}

#menuItemAction ul.ress_o li.ress_o

{

  display : block;

}

sur le css on constate que par défaut, toutes les li sont cachées mais que si la classe du ul se retrouve dans une des classes du li, alors le li est affiché.

ainsi si on reprend le code html du début, seules les lignes 3 et 5 seront visibles.

ensuite ben c'est tout simple. Lorsque je clique sur une ressource, je détecte sa propre classe (une ressource est du type

Code PHP :
<?php 

<a id="Sol_2" class="ress_p" href="#item" style="position: relative;">

<img class="imgr" title="Plantes des prairies 2" src="images/ressource/plantes.gif" alt="Plantes des prairies 2"/>

</a> 

) je la pose sur le ul et... c'est tout, le css fait le reste

ainsi pas de soucis, je veux créer un nouveau type de ressource, je ne touche pas au javascript, uniquement à la base de données (pour le serveur) et au css (pour le client)

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

Normalement, on écrit dans ce sens, le "li" est un élément de type block, il ne doit pas être dans un élément de type inline.

Code PHP :
<?php 

<div id="menuItemAction" class="cache"> 

<ul class="ress_a">

  <li id='act_1' class="ress_v"><a href='#item'>attaquer</a></li>

  <li id='act_2' class="ress_v"><a href='#item'>capturer</a></li>

  <li id='act_3' class="ress_a"><a href='#item'>couper du bois</a></li>

  <li id='act_4' class="ress_f"><a href='#item'>cueillir des fruits</a></li>

  <li id='act_5' class="ress_a"><a href='#item'>cueillir des feuilles</a></li>

  <li id='act_6' class="ress_p ress_o ress_m"><a href='#item'>ramasser</a></li>

</ul>

</div>

De plus tu peux aussi simplifier ton CSS comme cela :

Code PHP :
<?php 

#menuItemAction ul.ress_a li.ress_a, #menuItemAction ul.ress_v li.ress_v, 

#menuItemAction ul.ress_p li.ress_p, #menuItemAction ul.ress_m li.ress_m, 

#menuItemAction ul.ress_f li.ress_f, #menuItemAction ul.ress_o li.ress_o

{

  display : block;

}

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

je connaissais pas pour le CSS, merci Anthor Smile

par contre, pour le li, ben c'est une simple bétise de ma part, me suis planté là ^^

merci encore !