
{up form-select=action_onchange}
liste options CSV (label;value){/up form-select}
- form_select = url: mot-clé (url, url-blank) ou argument pour onchange ou prefset
- file: fichier CSV pour contenu
- separator = ;: séparateur colonnes du fichier CSV
- size = 1: nombre de lignes affichées (6) ou hauteur de la liste (ex: 50vh).
- no-content-html = en=content not found : %s;fr=contenu non trouvé : %s: message erreur. %s:nom fichier
Label avant le select
- label: texte ajouté au dessus de la liste
- label-style: classes et style inline pour le label
bouton après le select
- btn (bouton): texte du bouton pour valider le choix dans la liste. active raccourci: enter et double-clic sur liste
- btn-style: classes et style inline pour le bouton
Styles CSS
- id: Identifiant
- style: classes et styles
- css-head (base-css): style ajouté dans le HEAD de la page
- filter: conditions. Voir doc action filter
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}
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
Avec un bouton
Nouveauté version 3.0Pour 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>📖 </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
- 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 - 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
- en troisième, le popoper pour grand écran.
- ensuite, on passe à la version pour mobile avec le jcontent-by_categories en ligne 7
- suivi du form-select en ligne 3. Notez l'option size=1 pour avoir une liste monoligne.
- en ligne 2 et 10, j'ajoute un bloc div pour la présentation du form-select
- 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 !
upactionslist (1) flexauto (3) form-select (5) jmenus_list (1) span (1) icon (1) jcontent-info (1)
- Détails