Cette petite action affiche une compteur qui va progressivement passer d'une valeur de départ à une valeur d'arrivée.
{up counter=0,100}- counter: min,max : valeurs de départ et de fin
- width (l,largeur,w): largeur minimal (par défaut en pixels)
- mono = 1: force la police en monospace
style et options secondaires
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
- filter: conditions. Voir doc action filter (v1.8)
paramétres Javascript pour configuration du compteur
- start: valeur de départ du compteur
- end = 100: valeur d'arrivée du compteur
- easing = swing: ou linear : effet
- duration = 1500: durée du décompte en millisecondes
- prefix: texte devant compteur. BBcode autorisé
- suffix: texte après compteur. BBcode autorisé
Un exemple simple
Un compteur qui va passer de 0 à 250 :
{up counter=0,250}Il suffit d'indiquer la valeur de départ et celle d'arrivée en les séparant par une virgule.
Quelques options
UP dispose de actions au 20 novembre 2019
{up counter=0,70
| duration=10000
| mono=0
| width=40px
| style=font-size:36px;font-weight:bold }- l'option principale contient les bornes du compteur.
- duration permet de faire durer le plaisir. C'est le temps en millisecondes.
- par défaut, la police utilisée est monospace pour éviter les déplacements inesthétiques du texte autour. Ici, je supprime cette option avec mono=0.
- Pour éviter le décalage des textes, je fixe une largeur minimale pour le compteur. Le compteur est centré.
- le style permet de grossir les chiffres du compteur
UP dispose de au 15 décembre 2019
{up counter=0,75
| duration=10000
| suffix=<small> actions</small>
| class=bg-bleu t-blanc bd-arrondi p1
| style=font-size:36px;font-weight:bold }Cet exemple me permet de vous montrer l'utilisation de l'option suffix pour ajouter un texte directement dans le compteur. Il est possible de saisir du HTML. Pour info, l'entité   est un demi-espace.
L'option mono n'est pas inactivée pour vous montrer la différence de rendu. Le fait d'utiliser une police monospace rend moins utile la définition d'une largeur minimale.
L'option class permet de styler le compteur
Prefset
L'exemple précédent gagnerait à utiliser un jeu d'options
{up counter=0,75 | prefset=bleu}On indique les valeurs comme argument principal, puis le jeu d'options avec l'option prefset.
[bleu]
counter=0,100
duration=10000
suffix="<small> actions</small>"
class="bg-bleu t-blanc bd-arrondi p1"
style="font-size:36px;font-weight:bold"Remarquez que la valeur saisie dans le shortcode est prioritaire sur celle du jeu d'options
Astuce
Vous pouvez utiliser l'action SQL pour fournir les valeurs mini et/ou maxi. Voici les shortcodes que j'utilise sur la page d'accueil de ce site pour le compteur du nombre d'actions de UP.
{up counter=0,{up sql=content
| select=COUNT(id) AS 'nb'
| where=catid=8
| template=##nb##
| presentation=0 }
}Comme chaque action a une page de démo, il me suffit de compter le nombre d'articles de la catégorie "demo" (id=8) pour en connaitre le nombre.
Voyons les arguments pour l'action SQL :
- sql : le nom de la table. content est la table des articles
- select : la fonction qui retourne dans la variable "nb" le total d'articles
- where : la condition qui limite à la catégorie des démos (id=8)
- template : le mot clé utilisé par UP pour cibler la variable "nb"
- presentation : 0 pour avoir uniquement la valeur sans aucun habillage
Pour plus d'infos, voir la démo de l'action SQL
version 1.8
- filter : exécute l'action dans certaines conditions. 🆙 Filter : liste des conditions
upactionslist (1) counter (4) flexbox (1) modal (1) jcontent-info (1)