Contenu

I. Présentation de notre calendrier

voir < < séquence précédente

II. Touches raccourcis 'mois précédent' et 'mois suivant'

A. Les touches

Ne serait-il pas intéressant de prévoir des touches raccourcis permettant de naviguer rapidement d'un mois à l'autre ? De plus, 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 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 (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.

La différence entre ces images ? Aucune, sauf que votre navigateur (probablement assez récent) a tendance à 'lisser' les images et polices de caractères qui apparaissent à l'écran. Celles de gauche sont les petites images affichées et aggrandies 10 fois, celles de droite ont été aggrandies 10 fois et enregistrées comme telles.

Si vous souhaitez en savoir plus sur ce phénomène de lissage et de résolution d'écran d'ordinateur, le sujet a été abordé dans nos pages "TypoWeb" ou "la typographie sur le Web a ses contraintes".

Une autre solution est de faire 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 le mois suivant (à bien dimensionner pour convenir à votre horloge et à retourner pour le mois précédent) 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 sera modifiée ainsi :

CalLigne1 += "<tr align='center'><td colspan='8' class='TITRE'><b><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'></b></td></tr>";

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 comment activer ces touches...

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

Facile, il suffit de retirer (ou d'ajouter) un mois ! C'est oublier le mois précédent janvier et celui suivant décembre. C'est aussi oublier d'appeler une fonction de mise-à-jour à partir d'un clic sur ces touches (évènement onClick).

Où modifier les valeurs à afficher ?

en début de programme en faisant un reset ?
Une solution, mais réfléchissons : le programme reprendra la date actuelle et affichera le calendrier du mois en cours... mais pas celui du mois suivant ou précédent. On évitera donc.
en changeant les valeurs présélectionnées (celle du jour en cours) ?
Autre solution, mais ce serait long de refaire les listes déroulantes avec d'autres valeurs sélectionnées par défaut et devoir attendre une confirmation de l'internaute qui devra encore cliquer sur le bouton 'OK'. Faisable mais couteux en énergie...
en affectant de nouvelles valeurs aux trois variables anSouh, moisSouh et jourSouh avant d'appeler la fonction AfficheCalendrier() ?
Nettement plus facile à faire... cependant, il manquerait certaines vérifications comme celle qui consiste à voir si le jour souhaité du mois suivant n'est pas supérieur au nombre de jours du mois suivant... un mois plus tard qu'un 30 janvier, c'est un 30 février ???
en affectant de nouvelles valeurs aux trois variables anSouh, moisSouh et jourSouh avant d'appeler la fonction VerifDonnees() ?
Quasi identique au choix précédent, mais il faut 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 boutons, donc deux fonctions à activer : une pour le mois précédent, l'autre pour le mois suivant.

Comment créer ces fonctions ?

function mois_suiv() { moisSouh++; if (moisSouh>12) { moisSouh=moisSouh-12; anSouh++; } if (t_LongMaxMois[moisSouh] < jourSouh) { jourSouh = t_LongMaxMois[moisSouh]; } VerifDonnees(); } function mois_prec() { moisSouh--; if (moisSouh<1) { moisSouh=moisSouh+12; anSouh--; } if (t_LongMaxMois[moisSouh] < jourSouh) { jourSouh = t_LongMaxMois[moisSouh]; } VerifDonnees(); }

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.

Mais, VerifDonnees() ne risque-t-elle pas d'annuler ces réaffectations faites ? Et oui, elle reprendra les valeurs des listes déroulantes... on y reviendra...

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

voir suite >>>

IV. Appel de la fonction VerifDonnees()

voir suite >>>

V. P

voir suite >>>

| | Calendrier perpétuel - raccourcis année suivante ou précédente (51.3)