Salut !
J'ai voulu bien faire, et j'ai posté une question dans les forums que vous pourrez retrouver ici :
http://linuxfr.org/forums/6/2037.html(...)
J'aimerai bein savoir comment ça fonctionne tout ça (les [+] qui deviennent [-] en particulier), car jusqu'ici je n'ai pas réussi à obtenir quelque chose de bien sans passer par un formulaire... Pas franchement top.
Merci pour vos avis éclairés sur cette question qui me permettra de coder un menu dynamique (php+xhtml+css).
Journal Au risque de me répéter...
17
juin
2004
# update !
Posté par tfeserver tfe (site web personnel) . Évalué à -2.
[^] # Re: update !
Posté par Gyro Gearllose . Évalué à 1.
Je parle du [+]/[-] qui précède le titre d'un commentaire et qui permet de l'afficher ou non....
Aucun lien donc....
Merci quand même !
# ----------------------------
Posté par peyo (site web personnel) . Évalué à 2.
J'ai eu besoin recemment du principe du pliage/depliage d'un div. J'ai eu ce que je voulais en adaptant le code de cette page :
http://spipage.levillage.org/article.php3?id_article=88(...)
Je dois dire que j'ai un peu cherché les [+] de dlfp mais j'ai vite laissé tomber :/
Attention : ca utilise du javascript mais tu peux faire tout le reste avec du php/perl et des css. Le rendu est nickel. Tu peux faire apparaitre disparaitre n'importe quel div à condition de bien donner un # unique à chacun.
Voila ce que ça a donné : http://peyo.lost-oasis.net/annuaires.php(...)
avec un petite touche sur la css j'ai rendu plus joli aujourd'hu mais c'est pas en ligne....
mais ca exploite un fichier xml et genere un annuaire de 800 cartes enxeploitation.
Si qqun a une alternative sans javascript ça m'intéresse.
Plus simple pour une arborescence ya les fonctions php ici :
http://pbone.biz/index.php?id=50(...)
qui te génerent un arbre toutes seules comme des grandes
qui exploitent entre autre ceci :
http://www.treeview.net/(...)
[^] # Re: ----------------------------
Posté par Gyro Gearllose . Évalué à 1.
En fait, dans le forum, y'a quelqu'un d'au moins aussi sympa que toi ;-) qui m'a proposé des pistes, et des indices de réponses (Mathieu Pillard pour ne pas le citer).... Et j'ai pu bricoler ça :
[style]
.SousMenu
{
height:14px;
font-size:12px;
margin-left:10px;
overflow:hidden;
}
.SousMenuOpen
{
height:auto;
font-size:12px;
margin-left:10px;
}
[/style]
[script]
function change_class(link, elm)
{
elm.setAttribute('class', (elm.className.indexOf("O")> 0) ? 'SousMenu' : 'SousMenuOpen');
link.innerHTML = (elm.className.indexOf("O") > 0) ? '[-]' : '[+]';
}
[/script]
[body]
[div id="MenuApp" class="Menu"]
[h1]Menu[/h1]
[div id="SousMenu1" class="SousMenu"]
[a href="#" onclick="change_class(this, document.getElementById ('SousMenu1'));return (false);"][+][/a] Sous Menu 1
[div id="SousMenu1.1" class="SousMenu"]Sous Menu 1.1[/div]
[div id="SousMenu1.2" class="SousMenu"]Sous Menu 1.2[/div]
[div id="SousMenu1.3" class="SousMenu"]Sous Menu 1.3[/div]
[/div]
[div id="SousMenu2" class="SousMenu"]
[a href="#" onclick="change_class(this, document.getElementById ('SousMenu2'));return (false);"][+][/a] Sous Menu 2
[/div]
[div id="SousMenu3" class="SousMenu"]
[a href="#" onclick="change_class(this, document.getElementById ('SousMenu3'));return (false);"][+][/a] Sous Menu 3
[/div]
[/body]
Attention, ce code est très inspiré de ce qui provient de la dlfpbar, très crade (mon code, pas celui de linuxfr !) car ce n'est qu'un essai pour voir, et du code que j'ai consulté ici http://n.mo.free.fr/csslab/dyntree/treemarche.htm(...) comme Mathieu me l'a gentiment proposé.
J'ai également pu constater qu'on pouvait faire disparaître un ensemble de div en utilisant la propriété css hover... Mais c'est moyen pratique avec la souris.
Demain, si j'ai du temps, je vais voir à améliorer un peu mon code dégueulasse. Je pense en particulier virer les div et les remplacer par des listes imbriquées.... Ces listes étant générées par du code php.
Pour exprimer un peu le fond de ma pensée, et le fin mot de l'histoire, je me suis codé un moteur d'applications qui permet de coder rapidement des formulaires pour inter-agir avec une base de données postgreSQL.
Pour faciliter les choses, l'écran ne comporte qu'un seul formulaire. Celui-ci comporte à son tour des zones cachées qui sont remplies par des liens et permettent de savoir ce que l'utilisateur veux faire.
Avec le code ci-dessus, j'évite à l'utilisateur tous les échanges entre son poste et le serveur qui s'effectuaient lorsque celui-ci naviguait dans les menus.
En effet, les Menus/sous-menus sont représentés directement dans le système de fichier (répertoires/sous-répertoires), et les formulaires sont tout simplement des fichiers php inclus définissant des variables exploitées par le moteur. Simple et efficace. Il ne me reste plus qu'à modifier mon moteur et ajouter un cache à tout ça pour avoir un truc encore plus rapide !
J'esère avoir été clair à propos de ma problématique. Si ce n'était pas le cas, je tenterai de ré-expliquer.... En tout cas, merci pour les liens, que je consulterai plus en profondeur demain, depuis le boulot !
[^] # Re: ----------------------------
Posté par Gyro Gearllose . Évalué à 1.
Quelle est la différence entre :
[a href="#" onclick="change_class(this, document.getElementById ('SousMenu2'));return (false);"][+][/a]
et
[a href="JavaScript:change_class(this, document.getElementById ('SousMenu2'));return (false);"][+][/a]
Le premier fonctionne a merveille alors que le second ne fait rien du tout.... Pas compris, vraiment.... Pour moi, les deux sont équivalent, encore que le premier crée un lien mort associé à un gestionnaire d'évenements...
Enfin, comme je l'ai déjà indiqué, je suis loin de tout savoir, mais ça ne coute rien de se renseigner.... A votre bon coeur m'sieurs dammes !
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.