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.

Liste d'URL

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

{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}

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}

Une action javascript

{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}

Données d'une autre action

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

Avec un bouton

Pour l'accès rapide aux démonstrations, la petite icône 📖 dans le menu de ce site, il fallait trouver un moyen de sélectionner rapidement une action en tapant ses premières lettres.

Ce simple besoin a été l'occasion d'ajouter 5 options à cette action.

• btn : Le texte pour le bouton. Le simple ajout d'un libellé active le bouton.
  À partir de ce moment, un clic sur la liste ne validera plus l'action, Il faudra :
  • cliquer sur le bouton,
  • appuyer sur la touche entrée
  • faire un double-clic sur un élément de la liste.
    
• btn-style : classes et des styles. Ex: btn;btn-primary;margin-top:5px
• size : le nombre de lignes ou la hauteur de la liste en px, rem ou vh
• label : pas une nécessité, mais autant utiliser les options natives pour la balise select. Il suffit d'indiquer le texte figurant au dessus de la liste. Le BBCode est admis.
• label-style : un moyen d'ajouter des classes et des styles. Ex: bg-jaune;color:red

Pour les curieux, voici les shortcodes qui affichent l'accès rapide :

6{up filter=mobile}
  <div class="mh1 p1 bd-primary">
    5{up form-select | filter=mobile | size=1
     | btn=Voir la démo  | btn-style=btn btn-primary mt1 w100 tc
     | label=[b]Accès rapide aux démonstrations[/b]
     | style=bg-bleuPale t-bleu bd-bleuClair w100}
        4{up jcontent-by_categories=8 | filter=mobile | no-published=0 | sort-by=title | sort-order=asc
         | template=##maintitle##;##link## | main-tag=0 | item-tag=0}
    {/up form-select}
  </div>
{==== sur grand écran }
  3{up popover=<a>&#x1F4D6; </a> | filter=!mobile | class=t-red fs150 |  tag=li | top=0 | class=menu-item tc}
    2{up form-select | filter=!mobile | size=50vh
     | btn=Voir la démo  | btn-style=btn btn-primary mt1 w100 tc
     | label=[b]Accès rapide aux démonstrations[/b]
     | style=bg-bleuPale t-bleu bd-bleuClair w100}
      1{up jcontent-by_categories=8 | filter=!mobile | no-published=0 | sort-by=title | sort-order=asc
       | template=##maintitle##;##link## | main-tag=0 | item-tag=0}
    {/up form-select}
  {/up popover}
{/up filter}

Un peu d'explication pour ne pas vous effrayer. C'est plus long que compliqué.

Du fait du traitement des listes par les mobiles, il est nécessaire d'avoir 2 jeux de shortcodes.

• pour mobile : une liste déroulante (size=1) puisque l'interface du mobile vous présentera la sienne. Le popover est superflu.
• pour grand écran : la liste déroulante occupera 50% de la hauteur du navigateur

Un petit rappel : UP analyse les shortcodes à partir de la fin et les enfants d'abord.

Pour vous aider, j'ai ajouté l'ordre d'exécution sur fond jaune devant les shortcodes, ainsi que les parties significatives.
Ne pas les reprendre si vous faites un copier-coller

1. le premier shortcode interprété, seulement si l'on n'est pas sur mobile, est le jcontent-by_categories en ligne 12.
   Il va récupérer au format CSV le titre et le lien de tous les articles de la catégorie actions
2. le second sera form-select en ligne 9 sauf pour mobile. Notez l'option size=50vh qui indique d'occuper la moitié de la hauteur de l'écran
3. en troisième, le popoper pour grand écran.
4. ensuite, on passe à la version pour mobile avec le jcontent-by_categories en ligne 7
5. suivi du form-select en ligne 3. Notez l'option size=1 pour avoir une liste monoligne.
6. en ligne 2 et 10, j'ajoute un bloc div pour la présentation du form-select
7. arrivé ici, l'option filter utilisera le code préparé par les actions précédentes dans les 2 parties séparées par {===}. La première si mobile et la seconde pour grand écran.

C'est pour cela que j'aime UP. Imaginez faire la même chose en php, javascript et aspirine !