Premiers pas en JavaScript
51.3 calendrier amélioré :
année précédente et suivante

copyleft
See You Why?

| | Calendrier perpétuel - appel à la fonction VerifDonnees() (50.4)

Contenu

I. Présentation de notre calendrier

voir < < séquence précédente

II. Touches mois précédent et suivant

voir < < séquence précédente

III. Touches raccourcis 'année précédente' et 'année suivante'

A. Les touches

Ne serait-il pas aussi intéressant de prévoir des touches raccourcis permettant de naviguer rapidement d'un an à l'autre comme nous l'avons fait pour les mois ? Ici encore, il semble y avoir encore de la place de chaque côté du titre qui indique le mois en cours : suffisant pour y ajouter une double petite flèche vers la gauche et une autre vers la droite.

Images de préférence de petite taille pour ne pas encombrer la place, il suffirait de les doubler sans espace (nous les avons dessinées en 4 pixels de large et 8 de haut, aggrandissements ci contre) : et devraient suffire, rien ne vous empêche de les redimensionner à votre goût.

Images identiques ? Non, sauf que votre navigateur (probablement assez récent) a tendance à 'lisser' les images et polices de caractères qui apparaissent à l'écran.

Une autre solution est de refaire une recherche avec les mots : flèche, icone, droite et de faire votre choix parmi les icones proposées. Nous avons choisi l'icône suivante pour l'année suivante (à bien dimensionner pour convenir à votre horloge et à retourner pour l'année précédente) flech_simple_droite .

Où placer ces icônes ? De part et d'autre de la notification du mois nous semble être le choix le plus judicieux. L'ancienne ligne de code était :
CalLigne1 += "<tr align='center'><td colspan='8' class='TITRE'><b>" + t_ListeMois[moisSouh] + " " + anSouh + "</b></td></tr>";
qui, déjà modifiée (en rouge) pour incorporer les mois suivant et précédent, sera encore modifiée (en bleu) pour les années :
CalLigne1 += "<tr align='center'><td colspan='8' class='TITRE'><b><img src='images/2lefttarrow.png' alt='flech_dbl_gauche' width='25'>   <img src='images/1lefttarrow.png' alt='flech_simple_gauche' width='25'>   " + t_ListeMois[moisSouh] + " " + anSouh + "   <img src='images/1rightarrow.png' alt='flech_simple_droite' width='25'>   <img src='images/2rightarrow.png' alt='flech_dbl_droite' width='25'></b></td></tr>";
toujours avec autant d'espaces insécables à gauche qu'à droite pour préserver le centrage correct.

Ainsi, de :

Janvier 2015 le résultat de la ligne supérieure du calendrier deviendrait :
Janvier 2015 Encore faut-il savoir où et comment activer ces touches...

B. L'activation par JS de ces touches... Où ?

Dans la séquence précédente, nous avions réfléchi à la question et avions décidé de le faire en affectant de nouvelles valeurs aux trois variables anSouh, moisSouh et jourSouh avant d'appeler la fonction VerifDonnees() sans oublier de détecter que l'on n'est pas au premier passage de lecture de la fonction qui ne lit que les choix faits via les listes déroulantes...

C. L'activation par JS de ces touches... Comment ?

Deux nouveaux boutons, donc deux nouvelles fonctions à activer : une pour l'année précedente, l'autre pour l'année suivante.

Ici encore, le lecteur attentif fera remarquer qu'écrire cette fonction ne suffit pas... il faut encore ajouter à chacun des boutons un appel à ces fonctions via un onclick.

Comment créer ces fonctions ? Beaucoup plus facile que pour les mois... sauf une erreur possible tous les "29 février" des années bissextiles ;o) d'où :

function an_suiv() { anSouh++; if (t_LongMaxMois[moisSouh] < jourSouh) { jourSouh = t_LongMaxMois[moisSouh]; } VerifDonnees(); } function an_prec() { moisSouh--; if (t_LongMaxMois[moisSouh] < jourSouh) { jourSouh = t_LongMaxMois[moisSouh]; } VerifDonnees(); }

IV. Comment détecter d'où vient l'appel à la fonction VerifDonnees() ?

voir suite >>>

V. D

voir suite >>>

VI. P

voir suite >>>

| | Calendrier perpétuel - appel à la fonction VerifDonnees() (50.4)