Share
In de premie van vandaag zelfstudie en screencast, Ik ga je laten zien hoe je een strakke kalenderwidget opbouwt. We zullen CSS3 gebruiken om het een glanzende look en feel te geven, en dan wat mooie functionaliteit toevoegen met JavaScript.
Ik volg de blog 365PSD, een hele leuke site die elke dag een gratis PSD biedt, meestal een klein stukje gebruikersinterface. Voor dag 81 was er een heel mooie kalenderwidget. Ik dacht dat het niet te moeilijk zou zijn om het echte werk te bouwen, dus ik zal je laten zien hoe je dat vandaag moet doen!
We beginnen met het bouwen van onze HTML-structuur. Natuurlijk beginnen we met het skelet:
Kalender Widget
Dus in het lichaam beginnen we met een div om alles in te pakken; dan zullen we daar drie hoofdsecties in hebben:
Eerst hebben we div.header; terugkijkend op onze PSD, kunnen we zien dat dit overeenkomt met het bovenste deel, het gedeelte dat de maand bevat, de maandwisselaars en de bindingen. Dan hebben we een tabel voor de namen van de dagen. Eindelijk hebben we een div # cal-kader. Dit is het agendaraster.
Ik zal je een geheim vertellen: toen ik deze gebruikersinterface voor de kalender bouwde, had ik maar één tafel, met een thead voor de dagen en een tbody voor het agendaraster; maar toen ik eenmaal begon met het schrijven van JavaScript om tussen maanden te wisselen, werd het duidelijk dat ik iets flexibeler moest gebruiken. Je zult zien waarom wanneer we bij de JavaScript komen.
Dus gooi dit in die header:
⟨ 20 en 0 juni ⟩
We hebben hier vijf elementen; aan de buitenkant hebben we de linker en rechter kalenderwisselaars; omdat ik in dit project geen afbeeldingen wilde gebruiken, vond ik de HTML-entiteiten ⟨ en & belden (respectievelijk ⟨en⟩). Vervolgens hebben we twee lege perioden voor de agenda-bindingen. Eindelijk hebben we het maand / jaar-label in het midden.
De inhoud voor de table # dagen is vrij eenvoudig:
zon Ma Din trouwen do vr za
Eindelijk hebben we het lef van div # cal-kader; Bekijk het en dan bespreken we het:
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
Wat hebben we hier? Kortom, we maken het agendaraster met een tabel (later voegen we de huidige maand dynamisch in). De juiste cellen hebben de datumnummers; als de cellen leeg zijn, hebben ze de klasse "nul"; eindelijk heeft de datum van vandaag de "vandaag" -klasse.
En echt, dat is de omvang van de HTML; er is niet veel te zien nu, maar hier is wat we hebben:
Laten we beginnen met een omgeving:
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: 50px auto; lettertype: 13px / 1.5 "Helvetica Neue", Helvatica, Arial, san-serif; -display: table;
Vrij duidelijk, hè? Nadat we een achtergrondkleur hebben ingesteld, centreren we de kalenderwidget horizontaal en geven deze een vakschaduw. Natuurlijk stellen we het lettertype in. Maar waarom stellen we het display op tafel? Standaard een div wordt in blok weergegeven, wat betekent dat het de volledige beschikbare breedte in beslag neemt; door het als een tabel weer te geven, zal het de kleinste breedte nemen die het kan (terwijl het nog steeds kinderen bevat), en nog steeds een blokelement zijn.
Laten we ons vervolgens concentreren op de kopbalk:
#cal. koptekst cursor: standaard; achtergrond: # cd310d; achtergrond: -moz-linear-gradient (bovenaan, # b32b0c, # cd310d); achtergrond: -webkit-gradiënt (lineair, linksboven, linksonder, van (# b32b0c), tot (#cd310d)); hoogte: 34 px; positie: relatief; color: # fff; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; grens-bovenkant-linker-straal: 5px; border-top-right-radius: 5px; font-weight: bold; tekstschaduw: 0px -1px 0 # 87260C; text-transform: hoofdletters; #cal. Header span display: inline-block; line-height: 34px;
Dit is het eerste deel van de headerstyling; we beginnen met het instellen van de cursor op een aanwijzer; op deze manier lijkt de tekst niet selecteerbaar te zijn. Vervolgens stellen we een rode achtergrondkleur in; Als de browser dit echter ondersteunt, gebruiken we een achtergrondverloop: vergeet niet om het toe te voegen voor zowel Mozilla als Webkit! Stel vervolgens de hoogte in op 34 px; we stellen de relatieve positie in, omdat de kinderen absoluut gepositioneerd zijn; door het ouderelement relatief op te stellen, worden de kinderen absoluut tegen de ouder geplaatst in plaats van op het lichaam. Stel de tekstkleur in op wit, rond de linker- en rechterbovenhoek en maak het lettertype vetgedrukt. Geef vervolgens een kleine tekstschaduw om de tekst ingesprongen te laten lijken. Transformeer de tekst ten slotte in hoofdletters.
Elk van de items in de kop is een span; elk van deze wordt weergegeven als een inline-blok. Geef ze ook een regelhoogte van 34px (de hoogte van de koptekst).
Deze reeksen hebben ook een aantal speciale klassen, dus laten we eens kijken naar die:
#cal .header .hook width: 9px; hoogte: 28 px; positie: absoluut; bodem: 60%; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; achtergrond: #ececec; achtergrond: -moz-linear-gradient (rechtsboven, #fff, # 827e7d); achtergrond: -webkit-gradiënt (lineair, rechtsboven, rechtsonder, van (#fff), tot (# 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); .recht.haak rechts: 15%; .left.hook left: 15%;
Ten eerste hebben we de klasse "hook"; onthoud, dit zijn de haken of bindingen van de kalender. We stellen de breedte en hoogte in. Plaats het dan absoluut. Daarna verplaatsen we het van de onderste 60%. We zullen genoeg de hoek rond zijn om de bindingen te laten rondkijken. Vervolgens stellen we een achtergrondkleur in; als de browser verlopen ondersteunt, overschrijven we de effen achtergrond met een verloop. Dan geven we ze een doosschaduw.
We gebruiken de locatieklassen om de haken horizontaal te plaatsen; als het element zowel de klasse "hook" als "right" heeft, verplaats het dan 15% van rechts; als het de "left" -klasse heeft, verplaats het dan 15% van links.
Nu hebben we de maandschakelknoppen:
#cal .header. button width: 24px; text-align: center; positie: absoluut; #cal .header .left.button left: 0; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; grens-bovenkant-linker-straal: 5px; border-right: 1px solid # ae2a0c; #cal .header .recht.button rechts: 0; top: 0; border-left: 1px solid # ae2a0c; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; #cal. Kop.button: hover background: -moz-linear-gradient (top, # d94215, # bb330f); achtergrond: -webkit-gradiënt (lineair, linkerbovenkant, linksonder, van (# d94215), tot (# bb330f));
We stellen de breedte in op deze knoppen en centreren de tekst; natuurlijk moeten we ze ook absoluut positioneren. Dan, voor de linkerknop, verplaatsen we het helemaal naar links en bovenaan linksboven voor. Voor de rechterknop gaat deze naar rechts en rondt de rechterbovenhoek af.
Ten slotte voegen we een zweefeffect toe voor de knoppen; Natuurlijk gebruiken we een verloop.
Er is nog een ander element voor stijl: dat is het maandlabel.
#cal .kop .maand.jaar letter-spacing: 1px; breedte: 100%; text-align: center;
We zullen de gebruiken letterafstand om de personages een beetje meer ademruimte te geven. Vervolgens geven we de overspanning een breedte van 100% en centreren de tekst. Omdat alle elementen van de broer of zus absoluut gepositioneerd zijn, doet het geven van deze volledige breedte precies wat we willen.
Dus dat is de hele kop! Ik moet vermelden dat hoewel we de meeste elementen absoluut hebben gepositioneerd, omdat we percentages gebruiken om ze te positioneren, alles perfect schaalt wanneer je de lettergrootte in de browser verhoogt of verlaagt.
Oké, laten we verder gaan met de headers van de dag.
#cal table background: #fff; border-collapse: collapse; #cal td color: # 2b2b2b; width: 30px; hoogte: 30px; line-height: 30px; text-align: center; rand: 1px vast # e6e6e6; cursor: standaard; #cal #days td height: 26px; regelhoogte: 26px; text-transform: in hoofdletters; font-size: 90%; color: # 9e9e9e; #cal #days td: not (: last-child) border-right: 1px solid #fff;
We beginnen met twee iets meer generieke selectors: de dagkop en het agendaraster zijn beide tabellen, dus de eerste regel is van toepassing op beide: we stellen de achtergrond in op wit en laten de randen inklappen. Wanneer tabelranden zijn samengevouwen, hebben ze geen vulling tussen hen en aangrenzende cellen delen randen. Vervolgens geven we ze voor alle tabelcellen een tekstkleur, stellen ze hun breedte, hoogte en lijnhoogte in op 30 px en centreren ze de tekst. Ze krijgen allemaal een rand en de standaardcursor (een pijl / aanwijzer);
Vervolgens voegen we een specifieke stijl toe voor de tabelcellen in de tabel met dagen: we verminderen hun hoogte en regelhoogte een beetje, zorgen ervoor dat ze in hoofdletters staan en stellen de lettergrootte en tekstkleur opnieuw in. ( Notitie: in de begeleidende screencast schreef ik #dag in plaats van #days in de selector voor het derde blok hierboven en nooit gecorrigeerd; zorg ervoor dat je het goed doet!)
Waar is de laatste regel hierboven voor? Welnu, op dit moment zijn er lichtgrijze randen op de cellen van dagnamen. We willen de kleur van de randen rechts wijzigen in wit, zodat ze niet zichtbaar zijn. We willen dit echter niet doen met de laatste cel in de rij. We kunnen dus twee pseudo-klassen gebruiken. : geen parameter "uitsluiten selector". : last-child pakt het laatste kind van de elementen die we al hebben geselecteerd: in dit geval zijn dat de tabelcellen. Vervolgens stellen we gewoon de rechterrand in op effen wit.
#cal # cal-frame td.today background: #ededed; color: # 8c8c8c; box-shadow: 1px 1px 0px #fff inzet; -moz-box-shadow: 1px 1px 0px #fff inzet; -webkit-box-shadow: 1px 1px 0px #fff inzet; #cal # cal-frame td: not (.nil): hover color: #fff; text-shadow: # 6C1A07 0px -1px; background: # CD310D; achtergrond: -moz-linear-gradient (bovenaan, # b32b0c, # cd310d); achtergrond: -webkit-gradiënt (lineair, linksboven, linksonder, van (# b32b0c), tot (#cd310d)); -moz-box-shadow: 0px 0px 0px; -webkit-box-shadow: 0px 0px 0px;
Deze twee regels zijn gericht op het agendaraster. Voor de tabelcel met de klasse "vandaag", stellen we de achtergrond in op een lichtgrijs en de tekst op een donkerder grijs. Vervolgens plaatsen we een doosschaduw: het is een witte schaduw, maar we gebruiken geen vervaging, dus het is een witte lijn; we duwen het naar boven en naar de juiste pixel, dus we krijgen een secundair randeffect. Merk op dat we "inzet" toevoegen aan de boxschaduwverklaring, zodat de schaduw zich in de cel bevindt.
De volgende regel past een hover-effect op alle tabelcellen in het agendaraster toe, behalve die met de klasse "nul"; we stellen de tekst in op wit en voegen een tekstschaduw toe. Vervolgens veranderen we de achtergrond in rood en gebruiken we een verloop als dit mogelijk is. We nemen de verwijdering van vakschaduw op, specifiek voor de cel "vandaag".
Er is een speciale zaak die we nog niet hebben genoemd; pak de agenda in de buurt, nee, niet iCal, ik spreek een echte kalender met dode bomen en kijk naar oktober 2010. Je zult merken dat de laatste week een verdubbelde cel heeft, met zowel de 24th en de 31st op hetzelfde plein. We zullen het moeten doen, dus laten we er stijl voor geven.
De manier waarop we dat markeren, is door elke datum in een reeks in de tabelcel te plaatsen.
#cal # cal-frame td span font-size: 80%; position: relative; #cal # cal-frame td span: first-child bottom: 5px; #cal # cal-frame td span: last-child top: 5px;
Eerst plaatsen we de spans relatief en krimpen hun lettertype slechts een haar; Vervolgens verplaatsen we de eerste naar 5px en de tweede naar 5px.
We doen nog een ding; als we tussen maanden wisselen, willen we van de een naar de ander vervagen; dit vereist dat de twee tabellen bovenop elkaar staan. We kunnen dit met deze bereiken:
#cal # cal-frame table.curr float: left; #cal # cal-frame table.temp position: absolute;
Degene waar we uit verdwijnen zal een klasse "temp" hebben; de nieuwe die we binnenbrengen om (een tijdje) te blijven, zal de klasse "curr" hebben.
En dat is het voor de CSS! Laten we nu naar een aantal functies gaan.
We maken de functionaliteit van onze agenda eenvoudig opnieuw te gebruiken; in het licht daarvan beginnen we met dit skelet:
var CALENDAR = function () var wrap, label, months = ["January", "February", "March", "April", "May", "June", "July", "August", "September" , "Oktober november december"]; functie init (newWrap) functie switchMonth (volgende, maand, jaar) functie createCal (jaar, maand) createCal.cache = ; return init: init, switchMonth: switchMonth, createCal: createCal; ;
Dus we creëren drie functies binnen onze KALENDER-functie; men zal de kalenderwidget initialiseren, de tweede zal bewegen tussen maanden, en de derde zal feitelijk het kalenderraster creëren; let op die regel erna: createCal.cache = ; we zullen dat ook bespreken!
We hebben ook bovenaan drie variabelen gemaakt: we zullen geven wikkelen en label waarden binnen in het, maar maanden is een array met de namen van de maanden.
Hier is de inhoud van onze in het functie:
Accentsconagua
wrap = $ (newWrap || "#cal"); label = wrap.find ("# label"); wrap.find ("# vorige"). bind ("click.calendar", function () switchMonth (false);); wrap.find ("# next"). bind ("click.calendar", function () switchMonth (true);); label.bind ("klik", functie () switchMonth (null, new Date (). getMonth (), new Date (). getFullYear ());); label.click (); We beginnen met geven wikkelen en label de juiste waarden: merk op dat we de selector gebruiken die is doorgegeven aan in het om wrap te vinden, maar val terug naar "#cal" als er geen is opgegeven. Vervolgens koppelen we klikgebeurtenissen aan de volgende en vorige kalenderknoppen; deze noemen de switchMonth functie; als we de volgende kalender willen, passeren we waar, anders geven we fout door.
Echter, switchMonth kan ook nog twee parameters aannemen; we gebruiken deze voor de klikgebeurtenis op het label. Wanneer de gebruiker op de naam van de maand klikt, schakelen we over naar de huidige maand; dus we geven de huidige maand en het juiste jaar door, wat we kunnen krijgen via de JavaScript Datum voorwerp. Vergeet niet om de volgende parameter op null in te stellen!
Nog één ding (en een bonuspunt, dat staat niet in de screencast!): Wanneer de gebruiker de pagina laadt, willen we de juiste maand laden over de maand waarin de hardcoded is. De eenvoudigste manier om dat te doen is door de jQuery klikmethode op het label zonder parameters; dit simuleert een muisklik en brengt de kalender naar de huidige maand.
Laten we doorgaan naar de switchMonth functie:
var curr = label.text (). trim (). split (""), kalender, tempYear = parseInt (curr [1], 10); maand = maand || ((volgende)? ((curr [0] === "December")? 0: months.indexOf (curr [0]) + 1): ((curr [0] === "Januari")? 11: months.indexOf (curr [0]) - 1)); jaar = jaar || ((volgende && month === 0)? tempYear + 1: (! next && month === 11)? tempYear - 1: tempYear); We zullen een paar variabelen bovenaan zetten; we splitsen het label in een array genaamd curr; we creëren ook een kalender variabele en grijp het jaar van de kalender die momenteel wordt weergegeven.
Dan worden de zaken gecompliceerd. Ik heb hier voorwaardelijke JavaScript-operators gebruikt, zodat ik alles op één regel kan zetten. In plaats van te proberen het uit te leggen, kijk hier eens naar: dit is wat ze doen:
if (! month) if (volgende) if (curr [0] === "December") month = 0; else month = months.indexOf (curr [0]) + 1; else if (curr [0] === "Januari") month = 11; else month = months.indexOf (curr [0]) - 1;
U kunt zien waarom de conditionele operator aantrekkelijk is: het is maar één regel. Dit is de uitgebreide versie van de jaarvariabele:
if (! year) if (next && month === 0) year = tempYear + 1; else if (! next && month === 11) year = tempYear - 1; else year = tempYear;
Aan het einde van alles, maand en jaar zijn de juiste waarden voor de agenda die we de gebruiker proberen te tonen. Als je je prettiger voelt, kun je die twee regels vervangen door de bovenstaande fragmenten.
Vervolgens maken we de kalender en passen we de DOM aan:
calendar = createCal (jaar, maand); $ ("# cal-frame", wrap) .find (". curr") .removeClass ("curr") .addClass ("temp") .end () .prepend (calendar.calendar ()) .find (" .temp ") .fadeOut (" slow ", function () $ (this) .remove ();); $ ( '# Label') tekst (calendar.label).; Wat zit er in het kalenderobject dat terugkomt van de createCal functie? Het is een object, zoals dit:
calendar: function () / * retourneert een jQuery-object van de kalender * /, label: "Month Year"
We zullen bespreken waarom de kalendereigenschap een methode is om het te bouwen. Laten we voorlopig terugkeren naar het op de pagina zetten. We krijgen het kalenderkader en vinden de agenda die op het moment wordt weergegeven. Dan zullen we de klasse "curr" verwijderen en de klasse "temp" toepassen; dan zetten we de nieuwe kalender in (die trouwens met de klasse "curr" komt), en vervagen en verwijderen de oude.
Nou, we hebben nog maar een functie te gaan: createCal.
var day = 1, i, j, haveDays = true, startDay = nieuw Datum (jaar, maand, dag) .getDay (), daysInMonths = [31, (((% 4 == 0) && (jaar% 100! = 0)) || (jaar% 400 == 0))? 29: 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], kalender = [];
Dit is onze start: de variabelen. Wij hebben dag, ingesteld op 1; we hebben twee vars voor iteratie: ik en j. Vervolgens berekenen we op welke dag van de week de maand begint; We kunnen dit doen door een Date-object te maken voor de eerste dag van de maand en te bellen getDay.
Vervolgens maken we een array die het aantal dagen in elke maand bevat; voor februari moeten we rekening houden met schrikkeljaren, dus gebruik een andere ternaire expressie om dat te berekenen.
Eindelijk hebben we het heel belangrijke kalender variabele, die een array is.
Vervolgens willen we dat gebruiken cache eigendom dat we op de createCal functie. (Omdat alles in JavaScript een object is, kunnen zelfs functies eigenschappen hebben.)
if (createCal.cache [jaar]) if (createCal.cache [jaar] [maand]) return createCal.cache [jaar] [maand]; else createCal.cache [jaar] = ;
Dit is wat er aan de hand is: er is een mogelijkheid dat de gebruiker dezelfde maand meerdere keren zal 'vragen'. Zodra we het de eerste keer hebben gemaakt, is het niet nodig om het opnieuw te maken; we stoppen het in de cache en trekken het later uit.
Als dat cache object heeft een eigenschap met de naam van het jaar dat we zoeken, we kunnen dan controleren of de maand beschikbaar is; als we de maand al hebben gemaakt, retourneren we dat gecachte object. Als er geen property voor het jaar is, halen we het, omdat we de maand moeten plaatsen die we gaan maken.
Als we dit punt doorgeven, moeten we beginnen met het maken van de kalender voor de gevraagde maand.
i = 0; while (haveDays) calendar [i] = []; voor (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 [month]) haveDays = false; i ++;
Dit is een ingewikkeld stuk; Terwijl de haveDays variabele is waar, we weten dat we nog dagen over hebben in de maand. Daarom zullen we onze gebruiken ik iterator om een weekarray aan de agendareeks toe te voegen. Vervolgens gebruiken we een for-lus op de j iterator, terwijl het minder is dan 7; aangezien we met 0 beginnen, geeft dit ons 7 dagen voor de weekarray. Binnen onze for-loop zijn er drie gevallen.
Eerst moeten we controleren of we in de eerste week van de maand zijn; als we dat zijn, zullen we niet noodzakelijk op de eerste dag beginnen. We weten al op welke dag de maand begint; dat is in onze start dag variabel. Daarom, als j === startDag, we zijn op de juiste dag om te beginnen, dus we zullen de waarde van zetten dag in de juiste sleuf. Daarna verhogen we dag en start dag bij een. Volgende keer 'rond de lus, j en start dag zal hetzelfde zijn, dus dat blijft de rest van de week werken.
Als we niet in de eerste week zijn (i! == 0), dan zorgen we ervoor dat we nog dagen over hebben om aan de kalender toe te voegen; in dat geval plaatsen we ze op hun plaats. Eindelijk, als we niet in de eerste week zitten en we geen dagen meer hebben om aan de maand toe te voegen, plaatsen we in plaats daarvan een lege reeks. Dan zullen we beginnen haveDays naar false.
Aan het einde zullen we controleren om te zien of dag is groter dan het aantal dagen in de maand; als dat zo is, zullen we beginnen haveDays naar false. Dit is voor het speciale geval waarbij de maand op een zaterdag eindigt.
Vergeet natuurlijk niet om te verhogen ik net buiten de for-loop!
if (kalender [5]) voor (i = 0; i < calendar[5].length; i++) if (calendar[5][i] !== "") calendar[4][i] = ""+ kalender [4] [i] +""+ kalender [5] [i] +""; calendar = calendar.slice (0, 5);
We willen niet dat onze kalender meer dan 5 weken heeft; Als een dag of twee overgaat in week 6, splitsen we de cellen in week 5, zoals we hebben voorbereid in onze CSS. Dus als er een 6 isth array binnen de agendareeks lopen we er overheen. Als de inhoud van het array-element geen lege tekenreeks is, wijzen we de waarde van de cel direct "boven" rij 6 opnieuw toe: we pakken die waarde in een reeks en voegen een andere reeks met de juiste waarde van rij samen 6 binnenkant. Dat is logisch, toch?
Zodra we alles op zijn plaats hebben, snijden we het laatste element uit kalender.
voor (i = 0; i < calendar.length; i++) calendar[i] = ""; calendar = $ (" "+ calendar [i] .join (" ") +"
Nu is het tijd om elke week samen te voegen in onze kalender; we lus over elk in een for-lus en zet de ingangen in tabelrijen, met elke dag in een tabelcel. Vervolgens maken we van het hele ding een jQuery-object, nadat alle rijen van de tabel zijn samengevoegd en met een tafel zijn omwikkeld. We voegen dan de klasse "curr" toe aan die tabel.
Alle lege tabel cellen (we kunnen de jQuery pseudo-selector gebruiken: leeg om ze te vinden), krijg de klasse "nul".
Als we een kalender voor de huidige maand maken, vinden we de cel voor vandaag en geven deze de klas 'vandaag'; we kunnen het vinden door een functie door te geven aan de jQuery-filtermethode. De functie geeft true als de tekst van de cel overeenkomt met de datum.
Ten slotte maken we ons voltooide object en plaatsen dit in de cache. Waarom maken we de kalender eigenschap een functie? Nou, als we net een jQuery-object hebben geretourneerd, zodra we het aan de kalender hebben toegevoegd en vervolgens naar een andere maand zijn gegaan, zou de tabel uit de DOM worden verwijderd; later, als we teruggaan naar die maand, wordt het element niet weergegeven omdat de cache verwijst naar datzelfde DOM-element. Dus gebruiken we de kloonmethode van jQuery om een kopie van het DOM-element terug te sturen. Vervolgens krijgt het label de naam van de maand uit de reeks maanden en wordt dat samengevoegd met het jaar. Ten slotte retourneren we het object.
Werden gedaan! Terug in het index.html-bestand voegen we hier een scripttag aan toe:
var cal = KALENDER (); cal.init ();
Dat is het! Dit is hoe ons eindproduct eruit ziet!
Maar ik kan je de functionaliteit niet laten zien; je moet de code zelf bekijken! Bedankt voor het lezen!
