counter ~ afficher un compteur

Cette petite action affiche une compteur qui va progressivement passer d'une valeur de départ à une valeur d'arrivée.

➠ counter : Ajoute un compteur avec prefix et suffix

Cliquer pour lire la documentation

Syntaxe : {up counter=0,100}
author LOMART version UP-1.7 license GNU/GPLv3 credit jquery-simple-counter de marcovincit tags Widget
  • counter: min,max : valeurs de départ et de fin
  • filter: conditions. Voir doc action filter (v1.8)
  • width (l,largeur,w) = 0: largeur minimal (par défaut en pixels)
  • mono = 1: force la police en monospace
  • 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)
  • start = 0: 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>&thinsp;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é &thinsp; 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

    le shortcode

    {up counter=0,75 | prefset=bleu}

    On indique les valeurs comme argument principal, puis le jeu d'options avec l'option prefset.

    le prefs.ini

    [bleu]
    counter=0,100
    duration=10000
    suffix="<small>&thinsp;actions</small>"
    class="bg-bleu t-blanc bd-arrondi p1"
    style="font-size:36px;font-weight:bold"
    le résultat

    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