frendeitpt

form-select ~ créer une liste déroulante

Une liste déroulante est un moyen commode pour proposer des choix sans utiliser beaucoup de place.
🆙 form_select : liste déroulante d'options

Cliquer pour lire la documentation

syntaxe : {up form-select=action_onchange}liste options CSV (label;value){/up form-select}
author LOMART version UP-1.9 license GNU/GPLv3 tags expert
  • form_select = url: mot-clé (url, url-blank) ou argument pour onchange ou prefset
  • file: fichier CSV pour contenu
  • separator = ;: séparateur des colonnes
  • no-content-html = en=content not found : %s;fr=contenu non trouvé : %s: message erreur. %s:nom fichier
  • style: classes et styles
  • css-head (base-css):

    Liste d'URL

    Sans options, la liste déroulante attend des liens vers des pages Web qu'elle ouvrira dans l'onglet courant.

    le résultat

    le shortcode

    {up form-select}
sélectionner une valeur
google;https://www.google.fr
demo de l'action image-random;"/index.php?option=com_content&view=article&id=191&catid=8"
demo de l'action note;/demo/action-note
{/up form-select}

    Il suffit de mettre entre le shortcode ouvrant et fermant, les valeurs à afficher dans la liste, suivi d'un point-virgule et du lien à ouvrir.

    Attention : les éditeurs wysiwyg convertissent le & en entité HTML "&".
    Le séparateur par défaut étant le point-virgule, la fin de l'argument sera donc omis.
    Pour éviter cela, mettre des guillemets autour des arguments contenant des points-virgules.

    Pour ouvrir dans un nouvel onglet, il suffit de mettre url-blank comme argument principal. Le contenu peut être récupéré dans un fichier CSV.

    Exemple pour montrer ces 2 possibilités :

    {up form-select=url-blank | file=demo/liens.csv}
    contenu non trouvé : https://up.lomart.fr/images/actions-demo/form-select/liens.csv

     

    Une action javascript

    Cet exemple permet de changer la couleur de fond de la page.

    {up form-select=if (this.value != '') body.style.backgroundColor=(this.value)}
choisir une couleur de fond
vert;#98FB98
beige;tan
bleu;LightBlue
violet;#ee82ee
{/up form-select}

    En indiquant de code javascript comme argument principal de l'action, il est possible de réaliser plein de choses.

    Le code JS va simplement affecter la valeur trouvée dans la liste comme backgroundColor

    Données d'une autre action

    La liste des éléments du menu "documentation" de ce site, récupérée automatiquement par l'action jmenus_list

    contenu non trouvé : 
    Sélectionnez une option
{up jmenus_list | menuid=123
  | template-menu=##title##;##link##
  | template-menutype
  | main-tag=0
    }
{/up form-select}

    J'ai utilisé jmenus_list pour cet exemple, mais toutes les actions pouvant retourner une liste composée de ligne au format "texte affiché;valeur" peuvent convenir. ici : template-menu=##title##;##link##

    menuid est l'ID de menu parent. template-menutype est vide pour ne pas afficher le nom du menu et main-tag=0 pour ne pas avoir un résultat sous forme de liste.

    Le texte "Sélectionnez une option" avant le shortcode jmenus_list sera la première ligne de la liste.

    On habille la liste avec l'option style. AvecUP, il est possible de mélanger les classes et les styles.