Cette petite action affiche une compteur qui va progressivement passer d'une valeur de départ à une valeur d'arrivée.
Cliquer pour lire la documentation
{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
{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 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 ajouter un espace devant le mot, on insère l'entité   est un demi-espace. La méthode la plus simple est celle proposée par PU : encadré l'argument avec des guillements doubles.
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 dispose de aujourd'hui
UP dispose de {up counter=0,{up sql=content | select=count(id) | where=catid=8 and state=1}
| duration=10000
| suffix=" actions"
| class=bg-bleu t-blanc bd-arrondi p1
| style=font-size:36px;font-weight:bold} aujourd'huiComme 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 aux articles publiés de la catégorie des démos (id=8)
Pour plus d'infos, voir la démo de l'action SQL
upactionslist (1) flexauto (4) counter (5) flexbox (1) sql (1) modal (1) jcontent-info (1)