clocks-gmt ~ horloge mondiale

Cette action permet d'afficher une horloge pour un fuseau horaire

Réalisé à partir d'une version francisée et adaptée du script jClocksGMT de mcmastermind

🆙 clocks_gmt : Affiche une horloge analogique et/ou digitale avec l'heure d'un fuseau horaire

Cliquer pour lire la documentation

syntaxe {up clocks-gmt=ville | offset=décalage horaire}
@author: LOMART @version: UP-1.4 @license: GNU/GPLv3 @credit: script jClocksGMT de mcmastermind @tags: Widget
  • clocks_gmt: Nom de la ville (pour légende)
  • label-style: style inline pour le nom ville
  • digital-style: style inline pour horloge digitale
  • date-style: style inline pour date
  • base-js-params: règles JS définies par le webmaster (ajout dans init JS)

style général

  • id: id genérée automatiquement par UP
  • class: classe(s) ajoutées au bloc principal
  • style: style inline ajouté au bloc principal
  • css-head (base-css): autres règles CSS définies par le webmaster (ajout dans le head)

Paramétres Javascript pour l'horloge

  • offset: GMT offset
  • title (titre) = Greenwich, England: titre
  • skin = 1: indice images (voir la démo)
  • dst = 1: gestion heure d'été
  • analog = 1: afficher horloge analogique
  • digital = 1: afficher horloge digitale
  • timeformat = HH:mm: format pour la date
  • date: afficher la date
  • dateformat = MM/DD/YYYY: format pour l'heure
  • imgpath: chemin vers les images

La version simple

Dans sa forme la plus épurée, le shortcode affiche une horloge analogique et digitale pour le méridien de Greenwich

{up clocks-gmt}

La version complête comprend le nom de la ville/pays, et la date

On peut agir sur la visibilité de chacune de ces parties avec les options :
  • Ville : option principale sans argument
  • Horloge analogique : analog = 0 | 1
  • Horloge digitale : digital = 0 | 1
  • date : date = 0 | 1
Paris:
- San-Francisco:

Si on désire avoir les horloges sur une seule ligne, il est possible de procéder ainsi :

<div class="bg-bleuPale tr">
Paris: {up clocks-gmt | analog=0} - San-Francisco: {up clocks-gmt | analog=0 | offset=-7 | timeformat=h:mm A}
</div>

Noter la possibilité de choisir le formatage de l'heure. Voir les tableaux ci-dessous

Formatage de l'heure

Format Résultat Commentaires
HH 19 Format 24 heures avec zéro en tête (deux chiffres).
hh 07 Format 12 heures avec zéro en tête (deux chiffres).
H 19 Format 24 heures sans zéros en tête..
h 7 Format 12 heures sans zéros en tête..
mm 01 Minutes avec zéro en tête (deux chiffres).
m 1 Minutes sans zéro en tête.
ss 08 Secondes avec zéro en tête (deux chiffres).
s 8 Secondes sans zéro en tête.
a pm am ou pm (minuscules).
A PM AM ou PM (majuscules).
SSS 095 Millisecondes avec zéros en tête (trois chiffres).
S 95 Millisecondes sans zéro en tête.

Formatage de la date

Format Résultat Commentaires
YYYY 2016 Année sur quatre chiffres .
YY 16 Année sur deux chiffres .
MMMM Avril Mois au format texte complet.
MMM Avr Mois au format texte abrégé (les 3 premières lettres).
MM 04 Mois avec zéro en tête (deux chiffres).
M 4 Mois sans zéro en tête.
DDDD Vendredi Jour de la semaine au format texte (complet).
DDD Fri Jour de la semaine au format texte (les 3 premières lettres).
DD 01 Jour du mois avec zéro en tête (deux chiffres).
D 1 Jour du mois sans zéro en tête.

Les styles d'horloges

Le script met à disposition 5 skins (1 à 5)

{up clocks-gmt=San-Francisco | offset=-7 | style=float:left | skin=1}
{up clocks-gmt=New-York | offset=-5 | style=float:left | skin=2}
{up clocks-gmt=Paris | offset=1 | style=float:left | skin=3}
{up clocks-gmt=Moscou | offset=3 | style=float:left | skin=4}
{up clocks-gmt=Hong Kong | offset=8 | skin=5}

Remarquez l'ajout du style=float:left sur tous les shortcodes sauf le dernier pour avoir les horloges sur une même ligne.

Créer ses skins

Il est relativement facile de créer un nouveau style d'horloge en créant les images (fond + les 3 aiguilles). Pour cela aidez-vous du fichier photoshop (PSD) que vous trouverez sur le github du créateur du script.

Ci-dessous, une vision très Joomlanesque. Il suffit de conserver le nom des fichiers en changeant uniquement l'index (le 6 dans mon cas)

{up clocks-gmt=Paris | offset=1 | date | skin=6}

Personnaliser le style

Les options class et style permettent de styler le bloc principal. Les options label-style, digital-style et date-style traitent les sous-ensembles

{up clocks-gmt=Paris | date 
| class=bg-grisClair 
| style=border:#aaa solid 2px}
{up clocks-gmt=Paris | date 
| class=bg-grisClair 
| style=border:#aaa solid 2px 
| label-style=font-size:20px;color:#eee;background:#333}
{up clocks-gmt=Paris | date 
| class=bg-grisClair 
| style=border:#aaa solid 2px 
| digital-style=font-size:24px;color:crimson}
{up clocks-gmt=Paris | date 
| class=bg-grisClair 
| style=border:#aaa solid 2px 
| dateformat=DDDD D MMMM YYYY 
| date-style=color:crimson}

Options webmaster

Les paramètres css-head et base-js-params permettent au créateur du site de définir des comportements par défaut. Voir : 🆙 fichier custom/prefs.ini

Pour info, cette page utilise 18 action(s) :
clocks-gmt (15) upactionslist (1) modal (1) jcontent-info (1)
Détails