Liste déroulante de mots-clé avec liens

Fulvio

Mars 2012

J’avais besoin d’insérer dans mon squelette un sélecteur sur les mots-clé présentés sous forme de liste déroulante pour aller d’un click vers une page "mot" affichant les éléments correspondants : j’ai beaucoup cherché autour de la balise html "FORM ACTION" et de la balise spip "#BOUTON_ACTION" ... c’est loin d’être évident pour un non-informaticien, les explications trouvées sont assez hermétiques ...
J’ai fini par arriver à une écriture qui mélange les deux balises et qui semble fonctionner (spip2.1.12) mais j’aimerais savoir si elle est correcte :

<div>Faites votre choix dans la liste ci-dessous
<B_menu_mots>
<FORM ACTION="#URL_PAGE{mot}" METHOD="get">
<div>
<SELECT NAME="id_mot" style="width:192px;">
<BOUCLE_menu_mots(MOTS){par titre}>
<OPTION VALUE="#ID_MOT">#TITRE</OPTION>
</BOUCLE_menu_mots>
</SELECT>
<INPUT TYPE="submit" NAME="" VALUE="">
#BOUTON_ACTION{Validez votre choix, #URL_PAGE{mot}|parametre_url{id_mot,#ID_MOT}, ajax}
</div></FORM></B_menu_mots></div>

J’obtiens bien une liste déroulante avec tous les mots-clé qui me permet d’en sélectionner un ; en cliquant sur le bouton de validation on génère l’appel de la page "spip.php ?id_mot=identifiant du mot-clé sélectionné".
Peut-on mieux faire ?

Balises Formulaires

Par note Par date Par date chronologique

tcharlss

Mars 2012

Pas sur que #BOUTON_ACTION soit indiqué dans ce cas de figure, cette balise produit un formulaire complet, donc dans le code que tu montres ça fait 2 formulaires imbriqués l’un dans l’autre.
Cela dit si ça marche...

Quelque chose de plus simple pourrait convenir :

squelette :

<ul class='menu mots'>
	<li>
		Faites votre choix dans la liste ci-dessous
		<B_menu_mots>
		<ul>
			<BOUCLE_menu_mots(MOTS){par titre}>
			<li><a href="[(#URL_PAGE{mot}|parametre_url{id_mot,#ID_MOT})] class='ajax'>#TITRE</a></li>
			</BOUCLE_menu_mots>
		</ul>
		</B_menu_mots>
	</li>
</ul>

css :

.menu.mots ul {list-style:none;}
.menu.mots li {display:block; height:20px;}
.menu.mots > li > ul {display:none;} // sous-menu caché par défaut
.menu.mots > li:hover > ul {display:block;} // sous-menu affiché au survol
.menu.mots > li {position:relative;}
.menu.mots > li > ul {position:absolute; bottom:20px}

Bon style css c’est un peu vite fait, j’ai pas pris le temps de vérifier mais ça devrait te donner une idée.

Indiquez l’intérêt que vous portez à cette réponse

0

Fulvio

Mars 2012

Merci tcharlss, cette formulation produit bien la liste des mots-clé avec liens vers la page "mot" correspondante ... mais ce n’est pas une liste déroulante (ou alors je n’ai pas bien compris ... j’ai copié le code de la liste dans sommaire.html et celui des classes dans style.css).
Bien d’accord que "#BOUTON_ACTION" en sortie d’un "FORM ACTION" est bizarre, c’est du bricolage, mais j’en suis arrivé là parce que je ne vois pas comment construire une liste déroulante rien qu’avec "#BOUTON_ACTION".
Par ailleurs, l’utilisation du seul "FORM ACTION" avec son "INPUT type=submit" génère des liens qui ne fonctionnent pas (du type page=mot#ID_MOT). L’utilisation de cette balise est traitée dans l’article http://www.spip.net/fr_article1494.html du ch. "Quelques exemples de boucles" dans spip.net : mais cet article date de 2007 et il n’est peut être plus à jour pour spip2.1 !
Du coup mon bricolage fonctionne (on peut même remplacer "mot" par "article" et on obtient la liste déroulante de tous les articles avec lien vers la page de l’article sélectionné) ... mais je ne comprends pas bien pourquoi ...
Indiquez l’intérêt que vous portez à cette réponse

0

naema

Septembre 2018

Merci beaucoup à tcharlss pour cette réponse très claire et fournie ! La seule réponse de tout le web (et je cherche depuis 48h pour ce détail) entre les balises #formulaire, #bouton_action et #url_action_auteur (cette dernière qui n’a rien à voir avec l’auteur d’un article - qu’on se le dise, elle est très mal nommée) les novices comme moi, malgré deux mois de travail à temps complet sur un site, s’y perdent... Donc merci encore.