Premiers pas en JavaScript
51.2 calendrier amélioré :
mois précédent et suivant
cuy copyleft
  See You Why?  

 


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

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.

ou
ou

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 + "&nbsp;&nbsp;&nbsp;<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 :

flech_simple_gauche   Janvier 2015   flech_simple_droite

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 ?

 

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) dr