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

 

 

Merci de votre visite à partir de :

Vous êtes sur :
https://cuy.be/cours/jvs/jvs_511_calendrier_mois_1.html

partager sur FaceBook...           consulter sur FaceBook...

 

copyleft
Des liens ne fonctionnent plus ?
Avez-vous des suggestions ?
des commentaires, des corrections, un encouragement... ?
Pour info : Non, il n'y a pas de version papier ou DOC, PDF, etc. de ces notes.


Envoyez-moi un E-Mail (cuy(point)w(at)skynet(point)be)

Attention (at) signifie @ et (point) signifie .

Accueil CUY = See you why?

Compteur gratuitEasyCounter     BelStat Monitored by BelStat - Your Site Counts
La 1 000 000e page a été visitée le 21 mai 2010.
La 2 000 000e page a été visitée ce 18 mars 2012, vers midi.
La 3 000 000e page a été visitée ce 7 janvier 2014 entre 18 h et 18 h 45,
La 4 000 000e page a été visitée ce 5 juin 2015 entre 15 h 49 et 15 h 52,
La 5 000 000e page a été visitée ce 29 aout 2017 après 23 h 30,
Et la 6 000 000e page visitée, trop tôt pour y penser ?
 
et, d'après BelStat, CUY est visité surtout en semaine, peu le weekend...
moins et irrégulièrement pendant les vacances :

visites sur 3 mois, de la mi octobre 2013 à la mi janvier 2014.
 
La 3 333 333e page visitée a eu lieu ce mardi 10 juin 2014, en début d'après midi...
La 3 666 666e page visitée a eu lieu ce dimanche 28 decembre 2014, vers 16 h...
Un tiers de million de pages visitées en 154 jours cela fait une moyenne de 2165 pages visitées par jour...
Deux tiers de million de pages visitées en 355 jours soit une moyenne de 1878 pages visitées par jour...
et seulement 1195 pages visitées quotidiennement pendant les vacances estivales
de la mi juin à la mi septembre 2014

Vous voulez lire quelques messages reçus ?
quelques encouragements ?
Cliquez ici


Fin septembre 2009, installation de ce compteur
qui ne compte chaque nouvel ordinateur visiteur qu'une seule fois
free counter
 
m-à-j du 22/11/2021 :

Depuis cette fin septembre 2009, parmi les 210 pays (sur 274 drapeaux connus) qui nous ont visité,
voici les 100 pays qui nous visitent le plus, 
Nos petits visiteurs, classés par date de visite, où un seul ordi nous a visité, sont :
199. Turkmenistan (TM May 10, 2017) ; 200. Lesotho (LS March 1, 2017) ;
201. Turks and Caicos Island (TC January 18, 2016
202. Cook Islands (CK September 19, 2015)  203. Faroe Islands (FO January 27, 2015
204. Virgin Islands American (VI November 12, 2014) ;
205. Belize (BZ September 29, 2014) ;206. Eswatini - Swaziland (SZ July 21, 2014) ;
207. Grenada (GD April 3, 2014) ; 208. Timor-Leste (TI March 29, 2014) ;
209. American Samoa (AS December 26, 2012) ; 210. Guyana (GY November 5, 2010).