Share
Dans la prime d'aujourd'hui tutoriel et screencast, Je vais vous montrer comment construire un widget de calendrier lisse. Nous utiliserons CSS3 pour lui donner un aspect brillant, puis ajouterons de jolies fonctionnalités avec JavaScript.
Je suis le blog 365PSD, un site vraiment soigné qui offre un PSD gratuit, généralement un petit morceau d’UI, chaque jour. Pour le jour 81, il y avait un widget de calendrier vraiment soigné. J'ai pensé qu'il ne serait pas trop difficile de construire la vraie chose, alors je vais vous montrer comment faire cela aujourd'hui!
Nous allons commencer par construire notre structure HTML. Bien sûr, nous allons commencer par le squelette:
Widget Calendrier
Donc, à l'intérieur du corps, nous allons commencer par un div pour tout emballer; Ensuite, nous aurons trois sections principales:
Tout d'abord, nous avons div.header; En regardant en arrière notre PSD, nous pouvons voir que cela correspond à la partie supérieure, à la section contenant le mois, aux commutateurs de mois et aux liaisons. Ensuite, nous avons une table pour les noms des jours. Enfin, nous avons un div # cal-frame. Ceci est la grille du calendrier.
Je vous confierai un secret: quand j’ai construit cette interface utilisateur de calendrier, je n’avais qu’une table, avec un la tête pour les jours et un tbody pour la grille de calendrier; mais une fois que j'ai commencé à écrire du code JavaScript pour passer d'un mois à l'autre, il est devenu évident que je devais utiliser quelque chose de plus flexible. Vous verrez pourquoi quand on arrive à JavaScript.
Alors, jetez ceci dans cet en-tête:
⟨ 20 et 0 juin ⟩
Nous avons cinq éléments ici; à l'extérieur, nous avons les sélecteurs de calendrier gauche et droit; comme je ne voulais utiliser aucune image dans ce projet, j'ai trouvé les entités HTML ⟨ et & rang (et⟩, respectivement). Ensuite, nous avons deux étendues vides pour les liaisons du calendrier. Enfin, nous avons l'étiquette mois / année au milieu.
Le contenu de la table # jours est assez simple:
Soleil lun Mar mer jeu ven Sam
Enfin, nous avons le courage de div # cal-frame; jetez-y un coup d'œil et nous en discuterons ensuite:
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | dix | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
Alors qu'avons-nous ici? Fondamentalement, nous créons la grille de calendrier avec une table (plus tard, nous insérerons le mois en cours de manière dynamique). Les cellules appropriées ont les numéros de date; si les cellules sont vides, elles ont la classe "nil"; enfin, la date d'aujourd'hui a la classe "aujourd'hui".
Et vraiment, c'est l'étendue du HTML; Il n'y a pas grand chose à voir pour le moment, mais voici ce que nous avons:
Commençons par un environnement:
body background: # e0e0e0; #cal -moz-box-shadow: 0px 3px 3px rgba (0, 0, 0, 0,25); -webkit-box-shadow: 0px 3px 3px rgba (0, 0, 0, 0,25); marge: auto 50px; police: 13px / 1.5 "Helvetica Neue", Helvatica, Arial, san-serif; affichage: table;
Assez évident, hein? Après avoir défini une couleur d'arrière-plan, nous centrons le widget calendrier horizontalement et lui donnons une ombre. Bien sûr, nous définissons la police. Mais pourquoi plaçons-nous l'affichage sur la table? Par défaut, un div s'affichera en bloc, ce qui signifie qu'il occupera toute la largeur disponible; en l'affichant comme une table, il prendra la plus petite largeur possible (tout en contenant ses enfants), et sera toujours un élément de bloc.
Ensuite, concentrons-nous sur la barre d’en-tête:
#cal .header cursor: default; arrière-plan: # cd310d; arrière-plan: -moz-linear-gradient (haut, # b32b0c, # cd310d); arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (# b32b0c), à (# cd310d)); hauteur: 34px; position: relative; couleur: #fff; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; poids de police: gras; ombre du texte: 0px -1px 0 # 87260C; text-transform: majuscule; #cal .header span display: inline-block; hauteur de ligne: 34px;
Voici la première partie du style de l'en-tête; nous commençons par placer le curseur sur un pointeur; À leur manière, le texte ne semblera pas sélectionnable. Ensuite, nous allons définir une couleur de fond rouge; Cependant, si le navigateur le prend en charge, nous utiliserons un dégradé d’arrière-plan: n’oubliez pas de l’ajouter à la fois pour mozilla et webkit! Ensuite, réglez la hauteur à 34px; nous allons définir position par rapport, car les enfants seront positionnés de manière absolue; En positionnant l'élément parent relativement, les enfants seront positionnés absolument contre le parent, au lieu du corps. Définissez la couleur du texte sur blanc, entourez les coins supérieurs gauche et droit et mettez la police en gras. Ensuite, donnez une légère ombre au texte pour que le texte paraisse en retrait. Enfin, transformez le texte en majuscule.
Chacun des éléments de l'en-tête est un envergure; chacun d'eux sera affiché comme un bloc en ligne. En outre, leur donner une hauteur de ligne de 34px (la hauteur de l'en-tête).
Ces étendues ont aussi des classes spéciales, regardons donc celles-ci:
#cal .header .hook width: 9px; hauteur: 28px; position: absolue; en bas: 60%; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; arrière-plan: #ecec; arrière-plan: -moz-linear-gradient (en haut à droite, #fff, # 827e7d); arrière-plan: -webkit-gradient (linéaire, en haut à droite, en bas à droite, de (#fff) à (# 827e7d)); box-shadow: 0px -1px 2px rgba (0, 0, 0, 0.65); -moz-box-shadow: 0px -1px 2px rgba (0, 0, 0, 0.65); -webkit-box-shadow: 0px -1px 2px rgba (0, 0, 0, 0.65); .right.hook right: 15%; .left.hook left: 15%;
Premièrement, nous avons la classe "hook"; rappelez-vous, ce sont les crochets ou les reliures du calendrier. Nous allons définir la largeur et la hauteur. Ensuite, positionnez-le absolument. Ensuite, nous allons le déplacer des 60% inférieurs. Nous arrondirons suffisamment le coin pour que les fixations se retournent. Ensuite, nous allons définir une couleur de fond; si le navigateur prend en charge les dégradés, nous allons remplacer le fond uni par un dégradé. Ensuite, nous leur donnerons une ombre de boîte.
Nous utiliserons ensuite les classes d'emplacement pour positionner les crochets horizontalement; si l'élément a à la fois les classes "hook" et "right", déplacez-le de 15% par rapport à la droite; s'il a la classe "gauche", déplacez-le à 15% de la gauche.
Maintenant nous avons les boutons de changement de mois:
#cal .header .button width: 24px; text-align: center; position: absolue; #cal .header .left.button left: 0; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; border-right: 1px solide # ae2a0c; #cal .header .right.button right: 0; en haut: 0; border-left: 1px solide # ae2a0c; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; #cal .header .button: survol background: -moz-linear-gradient (haut, # d94215, # bb330f); arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (# d94215), à (# bb330f));
Nous allons définir la largeur sur ces boutons et centrer le texte; bien sûr, nous devrons également les positionner absolument. Ensuite, pour le bouton gauche, nous le déplaçons complètement vers la gauche et autour du haut à gauche pour. Pour le bouton droit, il va vers la droite et arrondit le coin en haut à droite.
Enfin, nous allons ajouter un effet de survol pour les boutons. bien sûr, nous allons utiliser un dégradé.
Il y a encore un élément à styler: c'est l'étiquette du mois.
#cal .header .month-year espacement des lettres: 1px; largeur: 100%; text-align: center;
Nous allons utiliser le l'espacement des lettres pour donner aux personnages un peu plus de marge de manœuvre. Ensuite, nous allons donner à la largeur une largeur de 100% et centrer le texte. Parce que tous les éléments frères sont positionnés absolument, ce qui donne toute la largeur à ce que nous voulons.
C'est tout l'en-tête! Je devrais mentionner que même si nous avons positionné la plupart des éléments de manière absolue, car nous utilisons des pourcentages pour les positionner, tout s’adapte parfaitement lorsque vous augmentez ou diminuez la taille de la police dans le navigateur..
Bon, passons aux en-têtes de jour.
#cal table background: #fff; effondrement de la bordure: effondrement; #cal td color: # 2b2b2b; largeur: 30px; hauteur: 30px; hauteur de ligne: 30px; text-align: center; bordure: 1px solide # e6e6e6; curseur: par défaut; #cal #days td height: 26px; hauteur de ligne: 26px; text-transform: majuscule; taille de la police: 90%; couleur: # 9e9e9e; #cal #days td: not (: last-child) border-right: 1px solid #fff;
Nous commençons avec deux sélecteurs légèrement plus génériques: l'en-tête du jour et la grille du calendrier sont tous deux des tableaux. La première règle s'applique donc aux deux: nous définissons l'arrière-plan en blanc et réduisons les bordures. Lorsque les bordures de la table sont réduites, il n'y a pas de remplissage entre elles et les cellules adjacentes partagent des bordures. Ensuite, pour toutes les cellules du tableau, nous leur donnerons une couleur de texte, définirons leur largeur, leur hauteur et leur hauteur de ligne sur 30 pixels, puis centrerons le texte. Ils ont tous une bordure et le curseur par défaut (une flèche / un pointeur);
Ensuite, nous ajouterons un style spécifique aux cellules du tableau dans le tableau des jours: nous réduirons un peu leur hauteur et leur hauteur de ligne, nous nous assurerons qu'elles sont en majuscule et nous réinitialiserons la taille de la police et la couleur du texte. ( Remarque: dans le screencast d'accompagnement, j'ai écrit #journée au lieu de #journées dans le sélecteur pour le troisième bloc ci-dessus et ne l'a jamais corrigé; assurez-vous de bien faire les choses!)
Quelle est la règle finale ci-dessus pour? Actuellement, il y a des bordures gris clair sur les cellules des noms de jour. Nous voulons changer la couleur des bordures à droite en blanc pour qu'elles ne soient pas visibles. Cependant, nous ne voulons pas faire cela à la dernière cellule de la ligne. Nous pouvons donc utiliser deux pseudo-classes. : not prendra un sélecteur d'exclusion "paramètre". : last-child récupère le dernier enfant des éléments déjà sélectionnés: dans ce cas, il s'agit des cellules du tableau. Ensuite, nous venons de définir le bord droit en blanc uni.
#cal # cal-frame td.today background: #ededed; couleur: # 8c8c8c; box-shadow: 1px 1px 0px #fff inset; -moz-box-shadow: 1px 1px 0px #fff inset; -webkit-box-shadow: 1px 1px 0px #fff inset; #cal # cal-frame td: pas (.nil): hover color: #fff; texte-ombre: # 6C1A07 0px -1px; arrière-plan: # CD310D; arrière-plan: -moz-linear-gradient (haut, # b32b0c, # cd310d); arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (# b32b0c), à (# cd310d)); -moz-box-shadow: 0px 0px 0px; -webkit-box-shadow: 0px 0px 0px;
Ces deux règles visent la grille du calendrier. Pour la cellule de tableau avec la classe "aujourd'hui", nous plaçons l'arrière-plan sur un gris clair et le texte sur un gris plus foncé. Ensuite, nous définissons une ombre encadrée: c'est une ombre blanche, mais nous n'utilisons pas de flou, c'est donc une ligne blanche; nous le poussons vers le pixel droit, nous obtenons donc un effet de bordure secondaire. Notez que nous ajoutons "inset" à la déclaration de l'ombre de la boîte, de sorte que l'ombre se trouve à l'intérieur de la cellule..
La règle suivante applique un effet de survol à toutes les cellules de la grille du calendrier, à l'exception de celles avec la classe "nil"; nous mettons le texte en blanc et ajoutons une ombre de texte. Ensuite, nous modifions l'arrière-plan en rouge, en utilisant un dégradé lorsque nous le pouvons. Nous incluons l'enlèvement de l'ombre de la boîte spécifiquement pour la cellule "aujourd'hui".
Il y a un cas particulier que nous n'avons pas encore mentionné; attrapez votre calendrier le plus proche - non, pas iCal, je parle d'un vrai calendrier en papier mort, et regardez, disons, octobre 2010. Vous remarquerez qu'il y a la dernière semaine une cellule doublée, avec les 24th et le 31st sur la même place. Nous devrons le faire, alors mettons-nous en style.
Nous marquerons cela en plaçant chaque date dans une plage à l'intérieur de la cellule du tableau..
#cal # cal-frame td span taille de la police: 80%; position: relative; #cal # cal-frame td span: premier enfant bas: 5px; #cal # cal-frame td span: dernier-enfant top: 5px;
Tout d'abord, nous positionnons le envergures relativement et rétrécir leur police juste un cheveu; Ensuite, nous déplaçons le premier de 5px et le second de 5px.
Nous ferons une dernière chose. quand nous passons d'un mois à l'autre, nous voulons passer de l'un à l'autre; cela nécessite que les deux tables soient superposées. Nous pouvons y parvenir avec ceci:
#cal # cal-frame table.curr float: left; #cal # cal-frame table.temp position: absolute;
Celui que nous perdons aura une classe de "temp"; le nouveau que nous amenons pour rester (pendant un certain temps) aura la classe "Curr".
Et c'est tout pour le CSS! Passons maintenant à certaines fonctionnalités.
Nous allons rendre la fonctionnalité de notre calendrier facile à réutiliser; à la lumière de cela, nous allons commencer par ce squelette:
var CALENDAR = function () var wrap, libellé, mois = ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "juillet", "août", "septembre" , "Octobre novembre décembre"]; function init (newWrap) function switchMonth (suivant, mois, année) function createCal (année, mois) createCal.cache = ; return init: init, switchMonth: switchMonth, createCal: createCal; ;
Nous créons donc trois fonctions dans notre fonction CALENDAR; l'un initialisera le widget calendrier, le second se déplacera d'un mois à l'autre et le troisième créera la grille du calendrier; remarquez cette ligne après: createCal.cache = ; nous en discuterons aussi!
Nous avons également créé trois variables en haut: nous donnerons emballage et étiquette valeurs au sein de init, mais mois est un tableau avec les noms des mois.
Voici le contenu de notre init une fonction:
Accentsconagua
wrap = $ (newWrap || "#cal"); label = wrap.find ("# label"); wrap.find ("# prev"). bind ("click.calendar", function () switchMonth (false);); wrap.find ("# next"). bind ("click.calendar", function () switchMonth (true);); label.bind ("click", function () switchMonth (null, nouvelle Date (). getMonth (), nouvelle Date (). getFullYear ()); label.click (); Nous commençons par donner emballage et étiquette les valeurs appropriées: notez que nous utilisons le sélecteur passé à init pour envelopper, mais retomber à "#cal" si on n'est pas fourni. Ensuite, nous lions les événements de clic aux boutons de calendrier suivants et précédents. ceux-ci appellent le switchMonth une fonction; si nous voulons le prochain calendrier, nous passons vrai, sinon nous passons faux.
toutefois, switchMonth peut également prendre deux paramètres supplémentaires; nous les utiliserons pour l'événement click sur l'étiquette. Lorsque l'utilisateur clique sur le nom du mois, nous basculons sur le mois en cours. donc, nous passerons dans le mois et l'année en cours, que nous pouvons obtenir à partir du JavaScript Rendez-vous amoureux objet. N'oubliez pas de définir le paramètre suivant sur null!
Encore une chose (et un bonus, cela ne figure pas dans le screencast!): Lorsque l’utilisateur charge la page, nous souhaitons charger le mois correspondant au mois codé en dur. Méthode de clic jQuery sur l'étiquette sans aucun paramètre; cela simule un clic de souris et amène le calendrier au mois en cours.
Passons au switchMonth une fonction:
var curr = label.text (). trim (). split (""), calendrier, tempYear = parseInt (curr [1], 10); mois = mois || ((next)? ((curr [0] === "décembre")? 0: months.indexOf (curr [0]) + 1): ((curr [0] === "janvier")? 11: months.indexOf (curr [0]) - 1)); année = année || ((next && month === 0)? tempYear + 1: (! next && month === 11)? tempYear - 1: tempYear); Nous allons définir quelques variables en haut; nous divisons l'étiquette dans un tableau appelé curr; nous créons aussi un calendrier variable et saisissant l'année du calendrier qui montre actuellement.
Alors les choses se compliquent. J'ai utilisé des opérateurs JavaScript conditionnels ici afin de pouvoir tout mettre sur une seule ligne. Plutôt que d'essayer de l'expliquer, vérifiez ceci: voici ce qu'ils font:
si (! mois) si (suivant) si (curr [0] === "Décembre") mois = 0; else mois = months.indexOf (curr [0]) + 1; else if (curr [0] === "Janvier") month = 11; else mois = months.indexOf (curr [0]) - 1;
Vous pouvez voir pourquoi l'opérateur conditionnel est attrayant: ce n'est qu'une ligne. Voici la version développée de la variable année:
si (! année) si (prochain && mois === 0) année = tempYear + 1; else if (! next && month === 11) year = tempYear - 1; else année = tempYear;
Au bout du compte, mois et année seront les valeurs correctes pour le calendrier que nous essayons de montrer à l'utilisateur. Si vous vous sentez plus à l'aise, vous pouvez remplacer ces deux lignes par les extraits ci-dessus..
Ensuite, nous créons le calendrier et ajustons le DOM en conséquence:
calendar = createCal (année, mois); $ ("# cal-frame", wrap) .find (". curr") .removeClass ("curr") .addClass ("temp") .end () .prepend (calendar.calendar ()) .find (" .temp ") .fadeOut (" slow ", function () $ (this) .remove ();); $ ('# label'). text (calendar.label); Que contient l'objet calendrier qui revient de la createCal une fonction? C'est un objet, comme ça:
calendar: function () / * retourne un objet jquery du calendrier * /, intitulé: "Mois Année"
Nous verrons pourquoi la propriété calendar est une méthode lorsque nous la construisons. Pour l'instant, revenons à le mettre sur la page. Nous allons obtenir le cadre du calendrier et trouver le calendrier actuel. Ensuite, nous allons supprimer la classe "curr" et appliquer la classe "temp"; puis nous mettons le nouveau calendrier dans (qui, soit dit en passant, vient avec la classe "curr"), puis disparaissons et supprimons l'ancien.
Eh bien, nous n’avons plus qu’une autre fonction à jouer: createCal.
var jour = 1, i, j, asDays = true, startDay = nouvelle date (année, mois, jour) .getDay (), daysInMonths = [31, ((année% 4 == 0) && (année% 100! = 0)) || (année% 400 == 0))? 29: 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], calendar = [];
Voici notre début: les variables. On a journée, mis à 1; nous avons deux vars pour l'itération: je et j. Ensuite, nous déterminons quel jour de la semaine commence le mois; nous pouvons le faire en créant un objet Date pour le premier jour du mois et en appelant getDay.
Ensuite, nous créons un tableau contenant le nombre de jours de chaque mois. pour février, nous devons tenir compte des années bissextiles, utilisez donc une autre expression ternaire pour calculer que.
Enfin, nous avons le très important calendrier variable, qui est un tableau.
Ensuite, nous voulons utiliser cela cache la propriété que nous mettons sur le createCal une fonction. (Parce que tout dans JavaScript est un objet, même les fonctions peuvent avoir des propriétés.)
if (createCal.cache [année]) if (createCal.cache [année] [mois]) retour createCal.cache [année] [mois]; else createCal.cache [année] = ;
Voici ce qui se passe: il est possible que l'utilisateur "demande" le même mois plusieurs fois. Une fois que nous le créons pour la première fois, il n’est pas nécessaire de le refaire; nous allons le mettre dans la cache et le retirer plus tard.
Si ce cache objet a une propriété avec le nom de l'année que nous recherchons, nous pouvons alors vérifier la disponibilité du mois; si nous avons déjà fait le mois, nous renverrons cet objet en cache. S'il n'y a pas de bien pour l'année, nous le ferons, car nous devrons y inscrire le mois que nous sommes sur le point de créer..
Si nous passons ce point, alors nous devons commencer à créer le calendrier pour le mois demandé.
i = 0; while (haveDays) calendar [i] = []; pour (j = 0; j < 7; j++) if (i === 0) if (j === startDay) calendar[i][j] = day++; startDay++; else if (day <= daysInMonths[month]) calendar[i][j] = day++; else calendar[i][j] = ""; haveDays = false; if (day > daysInMonths [mois]) haveDays = false; i ++;
C'est un peu compliqué; tandis que le jours passés la variable est vraie, nous savons qu'il nous reste des jours dans le mois. Par conséquent, nous utiliserons notre je itérateur pour ajouter un tableau hebdomadaire au tableau d'agenda. Ensuite, nous utilisons une boucle for sur le j itérateur, alors qu'il est inférieur à 7; puisque nous commençons avec 0, cela nous donnera 7 jours pour le tableau de la semaine. Dans notre boucle for, il y a trois cas.
Premièrement, nous devons vérifier si nous sommes dans la première semaine du mois; si nous le sommes, nous ne commencerons pas nécessairement le premier jour. Nous savons déjà quel jour commence le mois; c'est dans notre commence jour variable. Donc, si j === startDay, nous sommes sur le bon jour pour commencer, donc nous allons mettre la valeur de journée dans la bonne fente. Puis on incrémente journée et commence jour par un. La prochaine fois »autour de la boucle, j et commence jour sera le même, de sorte que continuera à travailler pour le reste de la semaine.
Si nous ne sommes pas dans la première semaine (i! == 0), nous nous assurerons qu'il nous reste encore des jours à ajouter au calendrier; si c'est le cas, nous les mettons en place. Enfin, si nous ne sommes pas sur la première semaine et que nous n'avons plus de jours à ajouter au mois, nous ajouterons une chaîne vide. Ensuite, nous allons définir jours passés à faux.
À la fin, nous vérifierons si journée est supérieur au nombre de jours du mois; si c'est le cas, nous définirons jours passés à faux. Ceci est pour le cas particulier où le mois se termine un samedi.
Bien sûr, n'oubliez pas d'incrémenter je juste en dehors de la boucle!
if (calendar [5]) for (i = 0; i < calendar[5].length; i++) if (calendar[5][i] !== "") calendar[4][i] = ""+ calendrier [4] [i] +""+ calendrier [5] [i] +""; calendar = calendar.slice (0, 5);
Nous ne voulons pas que notre calendrier ait plus de 5 semaines; si un ou deux jours se sont écoulés pendant la semaine 6, nous diviserons les cellules au cours de la semaine 5, comme nous l'avons préparé dans notre CSS. Donc, s'il y a un 6th tableau dans le tableau de calendrier, nous allons en boucle sur elle. Ensuite, si le contenu de l'élément de tableau n'est pas une chaîne vide, nous réaffecterons la valeur de la cellule directement "au-dessus" de la ligne 6: nous encapsulerons cette valeur dans une étendue et concaténerons une autre étendue avec la valeur appropriée de la ligne. 6 à l'intérieur. C'est logique, non??
Une fois que tout est en place, nous allons couper le dernier élément de calendrier.
pour (i = 0; i < calendar.length; i++) calendar[i] = ""; calendar = $ (" "+ calendar [i] .join (" ") +"
Maintenant il est temps de concaténer chaque semaine dans notre calendrier; Nous allons en boucle sur chacun d'eux dans une boucle et transformerons les entrées en lignes de tableau, chaque jour à l'intérieur d'une cellule de tableau. Ensuite, nous transformerons le tout en objet jQuery, après avoir rassemblé toutes les lignes de la table et les avoir enveloppées dans une table. Nous allons ensuite ajouter la classe "curr" à cette table.
Toutes les cellules de table vides (vous pouvez utiliser le pseudo-sélecteur jQuery: vides pour les trouver), obtenez la classe "nil".
Si nous créons un calendrier pour le mois en cours, nous allons trouver la cellule pour aujourd'hui et lui donner la classe "aujourd'hui"; nous pouvons le trouver en passant une fonction à la méthode de filtrage jQuery. La fonction renvoie true si le texte de la cellule correspond à la date..
Enfin, nous allons créer notre objet fini et le placer dans le cache. Pourquoi faisons-nous le calendrier propriété une fonction? Eh bien, si nous venons de renvoyer un objet jQuery, une fois ajouté au calendrier, puis reporté à un mois, la table sera supprimée du DOM; plus tard, si nous revenons à ce mois, l'élément ne s'affichera pas car le cache fait référence à ce même élément DOM. Nous utilisons donc la méthode clone de jQuery pour renvoyer une copie de l'élément DOM. Ensuite, label récupère le nom du mois à partir du tableau months et le concatène avec l'année. Enfin, nous retournons l'objet.
Avaient fini! De retour dans le fichier index.html, nous ajouterons une balise de script avec ceci:
var cal = CALENDRIER (); cal.init ();
C'est tout! Voici à quoi ressemble notre produit fini!
Mais je ne peux pas vous montrer la fonctionnalité; vous devrez vérifier le code vous-même! Merci d'avoir lu!
