Share
În prima de astăzi tutorial și screencast, Îți voi arăta cum să construiești un widget calendar calendaristic. Vom folosi CSS3 pentru a-i da un aspect strălucitor și apoi pentru a adăuga câteva funcții destul de clare cu JavaScript.
Urmăresc blogul 365PSD, un site cu adevărat elegant, care oferă o PSD liberă - de obicei o mică bucată de UI - în fiecare zi. Pentru Ziua 81, a existat un widget minunat pentru calendar. M-am gândit că nu ar fi prea greu să construiesc adevăratul lucru, așa că vă voi arăta cum să faceți asta astăzi!
Vom începe prin construirea structurii HTML. Desigur, vom începe cu scheletul:
Widgetul pentru calendar
Deci, în interiorul corpului, vom începe cu a div să-l înfășurați pe toate; atunci vom avea trei secțiuni principale:
În primul rând, avem div.header; Privind înapoi la PSD, putem observa că aceasta corespunde părții de sus, secțiunii care deține luna, comutatoarelor de luni și legăturilor. Apoi avem un tabel pentru numele zilelor. În cele din urmă, avem a div # cal-cadru. Aceasta este grila calendaristică.
Vă voi lăsa să păstrați un secret: Când am construit inițial acest interfață de calendar, am avut doar o masă, cu un dinlicitația pentru zile și a tbody pentru grila de calendar; dar odată ce am început să scriu JavaScript pentru a comuta între luni, a devenit evident că trebuia să folosesc ceva mai flexibil. Veți vedea de ce când ajungem la JavaScript.
Deci, aruncați asta în acel antet:
⟨ 20 iunie și 0 ⟩
Avem cinci elemente aici; la exterior, avem switch-urile de stânga și dreapta din calendar; deoarece nu am vrut să folosesc imagini în acest proiect, am găsit entitățile HTML ⟨ și & rang (⟨și⟩, respectiv). Apoi, avem două spații goale pentru legăturile de calendar. În cele din urmă, avem eticheta lună / an în mijloc.
Conținutul pentru tabelul # zile este destul de simplu:
soare mon tue însura thu fri SAT
În cele din urmă, avem curajul div # cal-cadru; verificați-l și apoi îl vom discuta:
| 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 |
Deci, ce avem aici? Practic, creăm grila de calendar cu un tabel (Mai târziu, vom introduce dinamic luna curentă). Celulele corespunzătoare au numerele de date; dacă celulele sunt goale, au clasa "zero"; în cele din urmă, data de astăzi are clasa "azi".
Și într-adevăr, aceasta este dimensiunea HTML; nu mai avem multe de văzut, dar iată ce avem:
Să începem cu un mediu:
corp 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); margine: 50 pixeli automat; font: 13px / 1.5 "Helvetica Neue", Helvatica, Arial, san-serif; afișare: tabel;
Destul de evident, nu? După ce setăm o culoare de fundal, centrarea widget-ului pentru calendar este orizontală și îi oferim o umbră cutie. Desigur, am setat fontul. Dar de ce setăm afișarea în tabel? Implicit, a div se va afișa în bloc, ceea ce înseamnă că va ocupa întreaga lățime disponibilă; prin afișarea ei ca o masă, aceasta va ocupa cea mai mică lățime pe care o poate (în timp ce încă mai conține copiii ei), și totuși să fie un element bloc.
Apoi, să ne concentrăm asupra barei de antet:
#cal .header cursor: implicit; fundal: # cd310d; fundal: -moz-linear-gradient (top, # b32b0c, # cd310d); fundal: -webkit-gradient (liniar, stânga sus, fund stânga, de la (# b32b0c), la (# cd310d)); înălțime: 34px; poziție: relativă; Culoare: #fff; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; raza de pe raza de sus-stanga: 5 pixeli; raza de sus-dreapta-dreapta: 5px; font-weight: bold; text-shadow: 0px -1px 0 # 87260C; text-transform: majuscule; spațierea #headhead display: inline-block; line-height: 34 de pixeli;
Iată prima parte a stilului antetului; începem prin setarea cursorului la un pointer; în felul acesta, textul nu va mai fi selectabil. Apoi, vom seta o culoare de fundal roșu; cu toate acestea, dacă browserul îl acceptă, vom folosi un gradient de fundal: nu uitați să îl adăugați atât pentru mozilla, cât și pentru webkit! Apoi, setați înălțimea la 34px; vom stabili poziția relativă, deoarece copiii vor fi absolut poziționați; prin poziționarea relativ a elementului părinte, copiii vor fi poziționați absolut împotriva părintelui, în locul corpului. Setați culoarea textului în alb, în jurul colțurilor din stânga și din dreapta sus și faceți fontul îngroșat. Apoi, dați o umbra ușoară de text pentru a face textul să pară indentat. În cele din urmă, transformați textul în majusculă.
Fiecare dintre elementele din antet este a deschidere; fiecare dintre acestea va fi afișată ca un bloc inline. De asemenea, dați-le o înălțime de linie de 34px (înălțimea antetului).
Aceste deschideri au, de asemenea, unele clase speciale, așa că haideți să ne uităm la acestea:
#cal .caper.hook lățime: 9px; înălțime: 28px; poziția: absolută; bottom: 60%; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; fundal: #ececec; fundal: -moz-linear-gradient (dreapta sus, #fff, # 827e7d); fundal: -webkit-gradient (liniar, dreapta sus, dreapta jos, de la (#fff), la (# 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); . dreapta.hooc dreapta: 15%; . lefturi (stânga: 15%;
În primul rând, avem clasa "cârlig"; amintiți-vă, acestea sunt cârligele sau legăturile calendarului. Vom stabili lățimea și înălțimea. Apoi, poziționați-o absolut. Apoi, o vom muta din partea de jos a 60%. Vom ajunge la colț pentru a face ca legăturile să pară rotunde. Apoi, vom seta o culoare de fundal; dacă browserul acceptă gradienți, vom trece peste fundalul solid cu un gradient. Apoi le vom da o umbra cutie.
Apoi vom folosi clasele de localizare pentru a poziționa cârligele orizontal; dacă elementul are atât clasa "cârlig" și "dreapta", mutați-l cu 15% din dreapta; dacă are clasa "stânga", mutați 15% din stânga.
Acum avem butoanele de schimbare a lunii:
butonul cap .button lățime: 24px; text-align: center; Poziția: absolută; #cal .header .left.button stânga: 0; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; raza de pe raza de sus-stanga: 5 pixeli; frontieră-dreapta: 1px solid # ae2a0c; #cal .header .right.button dreapta: 0; top: 0; margine stânga: 1px solid # ae2a0c; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; raza de sus-dreapta-dreapta: 5px; butonul #head .header: se deplasează background: -moz-linear-gradient (sus, # d94215, # bb330f); fundal: -webkit-gradient (linia, partea stângă sus, partea stângă jos, de la (# d94215), la (# bb330f));
Vom stabili lățimea acestor butoane și vom centra textul; bineînțeles, va trebui să le poziționăm absolut la fel de bine. Apoi, pentru butonul stâng, îl mutăm tot drumul spre stânga și spre stânga spre stânga. Pentru butonul drept, merge spre dreapta și rotunjește colțul din dreapta sus.
În cele din urmă, vom adăuga un efect de hover pentru butoane; bineînțeles, vom folosi un gradient.
Există încă un element de stil: aceasta este eticheta de luni.
#cal. antetul lunii an spațiu de litere: 1px; lățime: 100%; text-align: centru;
Vom folosi spațiul dintre litere pentru a da personajelor o cameră de respirație mai mult. Apoi, vom da o lățime de 100% și vom centra textul. Deoarece toate elementele sibling sunt pozitionate absolut, oferind aceasta latimea completa face exact ceea ce vrem.
Deci asta e tot antetul! Ar trebui să menționez că, deși am plasat absolut cele mai multe elemente, pentru că folosim procente pentru a le poziționa, totul se mărește perfect atunci când creșteți sau micșorați dimensiunea fontului în browser.
Bine, să trecem la anteturile zilei.
#calcul tabel background: #fff; frontieră-colaps: colaps; #cal td culoare: # 2b2b2b; lățime: 30px; înălțime: 30px; line-height: 30px; text-align: center; frontieră: 1px solid # e6e6e6; cursor: implicit; #cal # zile td height: 26px; line-height: 26px; text-transform: majuscule; font-size: 90%; Culoare: # 9e9e9e; #cal # zile zilei td: nu (: ultimul-copil) border-right: 1px solid #fff;
Începem cu două selectori generici mai puțin generici: antetul zilei și grilă calendar sunt ambele tabele, astfel încât prima regulă se aplică pentru ambele: setăm fundalul în alb și colapsând marginile. Când marginile mesei sunt restrânse, ele nu au nicio umplutură între ele și celulele adiacente împărtășesc frontierele. Apoi, pentru toate celulele de masă, le vom da o culoare text, setându-le lățimea, înălțimea și înălțimea liniei la 30 de pixeli și centrarea textului. Toți au o frontieră și cursorul implicit (o săgeată / pointer);
Apoi, vom adăuga un anumit stil pentru celulele tabelului din tabelul de zile: vom reduce puțin înălțimea și înălțimea liniei, asigurați-vă că sunt majuscule și resetați dimensiunea fontului și culoarea textului. ( Notă: în ecranul de însoțire, am scris #zi in loc de #days în selectorul pentru cel de-al treilea bloc de mai sus și nu l-a corectat; asigurați-vă că aveți dreptate!)
Pentru ce este regula de mai sus? Ei bine, în prezent, există granițe gri deschis pe celulele denumirilor. Vrem să schimbăm culoarea frontierelor de la dreapta la alb, deci nu sunt vizibile. Cu toate acestea, nu vrem să facem acest lucru la ultima celulă din rând. Deci, putem folosi două pseudo-clase. : nu va lua un parametru de excludere selector ". : ultima copil primește ultimul copil al elementelor pe care le-am ales deja: în acest caz, acelea sunt celulele tabelului. Apoi, am setat doar marginea dreaptă la albul solid.
#cal # cal-frame td.today fundal: #ededed; Culoare: # 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 # cadru-cadru td: nu (.nil): hover culoare: #fff; text-shadow: # 6C1A07 0px -1px; fundal: # CD310D; fundal: -moz-linear-gradient (top, # b32b0c, # cd310d); fundal: -webkit-gradient (liniar, stânga sus, fund stânga, de la (# b32b0c), la (# cd310d)); -moz-box-shadow: 0px 0px 0px; -webkit-box-shadow: 0px 0px 0px;
Aceste două reguli vizează grila calendaristică. Pentru celula de masă cu clasa "azi", setăm fundalul la un gri deschis și textul la un gri mai închis. Apoi, am stabilit o umbra cutie: este o umbra alba, dar nu folosim nici o estompare, deci este o linie alba; Îl împingem în sus și la un pixel drept, deci avem un efect de graniță secundară. Observați că adăugăm "inset" la declarația de umbră a cutiei, astfel încât umbra se află în interiorul celulei.
Următoarea regulă aplică un efect de hover asupra tuturor celulelor de masă din grila calendarului, cu excepția celor cu clasa "zero"; am setat textul în alb și adăugăm o umbră de text. Apoi, schimbăm fundalul în roșu, folosind un gradient când putem. Acceptăm eliminarea umbrei cutiei special pentru celula "de azi".
Există un caz special pe care nu l-am menționat încă; apucați-vă cel mai apropiat calendar - nu, nu iCal, vorbesc un adevărat calendar de hârtii moarte - și uitați-vă, oh, spuneți, octombrie 2010. Veți observa că există ultima săptămână are o celulă dublată, cu ambele 24lea și 31Sf în același pătrat. Va trebui să facem asta, așa că hai să-i facem stilul.
Modul în care vom marca acest lucru este prin punerea fiecărei date într-un interval în interiorul celulei tabelului.
#cal # cal-frame td span font-size: 80%; Poziția: relativă; #cal # cal-frame td span: primul-copil jos: 5px; #cal # cal-frame td span: ultimul-copil top: 5px;
În primul rând, poziționăm deschideres relativ și să-și micșoreze fontul doar cu părul; Apoi, mutăm primul cu 5px, iar cel de-al doilea cu 5px.
Vom face încă un lucru; când schimbăm între luni, vrem să fade de la un la altul; acest lucru necesită ca cele două tabele să fie una peste alta. Putem realiza acest lucru prin aceasta:
#cal # cal-frame table.curr float: left; #cal # cal-frame tab.temp poziție: absolută;
Cea pe care o pierdem va avea o clasă de "temp"; cel nou pe care îl aducem pentru a rămâne (pentru un timp) va avea clasa "curr".
Și asta este pentru CSS! Acum, să trecem la câteva funcționalități.
Vom face ușor să reutilizeze funcționalitatea calendarului nostru; în lumina acestui fapt, vom începe cu acest schelet:
var CALENDAR = funcție () var wrap, etichetă, luni = ["ianuarie", "februarie", "martie", "aprilie", "mai", "iunie", " , "Octombrie noiembrie decembrie"]; funcția init (newWrap) funcția switchMonth (următoarea, luna, anul) funcția createCal (an, lună) createCal.cache = ; retur init: init, switchMonth: switchMonth, createCal: createCal; ;
Așadar, noi creăm trei funcții în cadrul funcției CALENDAR; unul va inițializa widget-ul calendarului, cel de-al doilea se va deplasa între luni și cel de-al treilea va crea grilă calendaristică; observați că linia după aceasta: createcal.cache = ; vom discuta și despre asta!
De asemenea, am creat trei variabile în partea de sus: vom da împacheta și eticheta valori în interiorul init, dar luni este o matrice cu numele lunilor.
Iată conținutul nostru init funcţie:
Accentsconagua
wrap = $ (newWrap || "#cal"); label = wrap.find ("# label"); wrap.find ("# prev") bind ("click.calendar", funcția () switchMonth (false);); wrap.find ("# next") bind ("click.calendar", funcția () switchMonth (true);); label.bind ("faceți clic pe", funcția () switchMonth (null, new Date (). getMonth (), new Date () getFullYear (); label.click (); Începem prin a da împacheta și eticheta valorile corespunzătoare: observați că folosim selectorul trecut init pentru a găsi folie, dar să se întoarcă la "#cal" dacă nu este furnizat. Apoi, bindem evenimentele clic pe butoanele următoare și anterioare; acestea numesc switchMonth funcţie; dacă vrem calendarul următor, trecem cu adevărat, altfel, trecem false.
in orice caz, switchMonth pot lua și alți doi parametri; vom folosi cele pentru evenimentul de clic de pe etichetă. Când utilizatorul face clic pe numele lunii, vom trece la luna curentă; astfel încât vom trece în luna și anul curent, pe care le putem obține de la JavaScript Data obiect. Nu uitați să setați următorul parametru la null!
Încă un lucru (și un sfat de bonus, care nu este în ecranul!): Când utilizatorul încarcă pagina, vrem să încărcăm luna potrivită pentru luna în care este codat greu. Cea mai simplă modalitate de a face asta este de a apela metoda jQuery clic pe etichetă fără parametri; acest lucru simulează un clic pe mouse și aduce calendarul în luna curentă.
Să trecem la switchMonth funcţie:
var curr = label.text (). trim (), împărțit (""), calendar, tempYear = parseInt (curr [1], 10); luna = luna || (curr [0] === "decembrie")? 0: months.indexOf (curr [0]) + 1) months.indexOf (curr [0]) - 1); an = an || (următorul && luna === 0)? tempYear + 1: (! next && month === 11)? tempYear - 1: tempYear); Vom pune câteva variabile în partea de sus; divizăm eticheta într-un matrice numită curr; de asemenea, creăm un calendar variabilă și apucând anul calendarului care se afișează în prezent.
Atunci lucrurile se complică. Am folosit operatorii conditionat JavaScript aici, astfel încât să pot pune totul pe o singură linie. Mai degrabă decât să încercați să explicați acest lucru, verificați acest lucru: acestea sunt lucrurile pe care le fac:
dacă (lună) if (următorul) if (curr [0] === "decembrie") month = 0; altfel month = months.indexOf (curr [0]) + 1; altceva if (curr [0] === "ianuarie") month = 11; altceva month = months.indexOf (curr [0]) - 1;
Puteți vedea de ce operatorul condițional este atractiv: este doar o singură linie. Iată versiunea extinsă a variabilei an:
dacă (! year) if (următor && month === 0) year = tempYear + 1; altfel dacă (! next && month === 11) year = tempYear - 1; altceva year = tempYear;
La sfârșitul anului totul, lună și an vor fi valorile corecte pentru calendarul pe care încercăm să îl afișăm utilizatorului. Dacă te-ai simți mai confortabil, poți înlocui aceste două linii cu fragmentele de mai sus.
Apoi creăm calendarul și ajustăm DOM corespunzător:
calendar = createCal (an, lună); ("curr") .addClass ("temp") .end () .prepend (calendar.calendar ()) .find (" .temp ") .fadeOut (" lent ", funcția () $ (this) .remove ();); $ ( '# Eticheta') text (calendar.label).; Ce este în obiectul calendar care se întoarce de la createCal funcţie? Este un obiect, astfel:
calendar: function () / * returnează un obiect jquery al calendarului * /, eticheta: "Anul lunii"
Vom discuta de ce proprietatea calendarului este o metodă când ajungem la construirea acesteia. Pentru moment, să revenim la punerea ei pe pagină. Vom primi cadrul calendarului și vom găsi calendarul care arată în curând. Apoi, vom elimina clasa "curr" și vom aplica clasa "temp"; apoi am introdus noul calendar (care, apropo, vine cu clasa "curr"), și se estompează și se elimină vechea.
Ei bine, avem de-a face cu încă o funcție: createCal.
var zi = 1, i, j, haveDays = true, startDay = new Data (anul, luna, ziua) .getDay (), daysInMonths = [31, (year% 4 == 0) && (year% 100! = 0)) || (anul% 400 == 0))? 29: 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], calendar = [];
Iată startul nostru: variabilele. Noi avem zi, setat la 1; avem două vars pentru iterare: eu și j. Apoi, ne dăm seama ce zi a săptămânii începe luna; putem face acest lucru prin crearea unui obiect Date pentru prima zi a lunii și apelarea getDay.
Apoi vom crea o matrice care să păstreze numărul de zile din fiecare lună; pentru luna februarie, trebuie să luăm în calcul anii de salt, deci folosiți o altă expresie ternară pentru a calcula acest lucru.
În cele din urmă, avem foarte important calendar variabilă, care este o matrice.
Apoi, vrem să folosim asta ascunzătoare proprietatea pe care o punem createCal funcţie. (Deoarece tot în JavaScript este un obiect, chiar și funcțiile pot avea proprietăți.)
dacă [createCal.cache [year]) if (createCal.cache [year] [month]) retur creaCal.cache [an] [lună]; altceva createCal.cache [year] = ;
Iată ce se întâmplă: există o posibilitate ca utilizatorul să "solicite" aceeași lună de mai multe ori. Odată ce l-am creat pentru prima oară, nu mai este nevoie să o facem din nou; o vom pune în cache și o vom scoate mai târziu.
Daca asta ascunzătoare obiectul are o proprietate cu numele anului pe care îl căutăm, putem verifica disponibilitatea lunii; dacă am făcut deja luna, vom returna obiectul cache. Dacă nu există proprietate pentru anul, vom reuși, pentru că va trebui să punem luna în care suntem pe cale să creăm în ea.
Dacă trecem acest punct, atunci trebuie să începem să creăm calendarul pentru luna solicitată.
i = 0; în timp ce (haveDays) calendar [i] = []; pentru (j = 0; < 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 > zileInMonte [lună]) haveDays = false; i ++;
Acesta este un pic complicat; in timp ce haveDays variabila este adevărată, știm că avem zile rămase în lună. Prin urmare, vom folosi serviciile noastre eu iterator pentru a adăuga o matrice săptămânală la matricea calendarului. Apoi, folosim o buclă pentru j iterator, în timp ce este mai mic de 7; deoarece începem cu 0, acest lucru ne va da 7 zile pentru matricea săptămânii. În interiorul for-loop-ului nostru, există trei cazuri.
În primul rând, trebuie să verificăm dacă suntem în prima săptămână a lunii; dacă suntem, nu vom începe neapărat în prima zi. Știm deja în ce zi începe luna; asta este în noi startDay variabil. Prin urmare, dacă j === startDay, suntem în ziua potrivită pentru a începe, așa că vom pune valoarea zi în slotul drept. Apoi noi creștem zi și startDay de unul. Data viitoare "în jurul for-buclă, j și startDay va fi la fel, astfel încât va continua să lucreze pentru restul săptămânii.
Dacă nu suntem în prima săptămână (i! == 0), atunci ne vom asigura că mai avem zile de adăugat în calendar; dacă este așa, le punem la loc. În cele din urmă, dacă nu suntem în prima săptămână și nu avem zile de adăugat la lună, vom plasa în schimb un șir gol. Apoi, vom stabili haveDays la fals.
În final, vom verifica dacă zi este mai mare decât numărul de zile din lună; dacă este, vom stabili haveDays la fals. Acesta este cazul cazului special în care luna se încheie într-o sâmbătă.
Desigur, nu uitați să creșteți eu chiar în afara forului de buclă!
dacă (calendarul [5]) pentru (i = 0; i < calendar[5].length; i++) if (calendar[5][i] !== "") calendar[4][i] = ""+ calendar [4] [i] +""+ calendar [5] [i] +""; calendar = calendar.slice (0, 5);
Nu vrem ca calendarul nostru să aibă mai mult de 5 săptămâni; dacă într-o zi sau două vărsări în săptămâna 6, vom împărți celulele în săptămâna 5, așa cum am pregătit pentru CSS. Deci, dacă e 6lea în matricea calendaristică, vom trece peste aceasta. Apoi, dacă conținutul elementului matrice nu este un șir gol, vom reevalua valoarea celulei direct "deasupra" rândului 6: vom înfășura acea valoare într-un interval și vom concatena o altă deschidere cu o valoare corespunzătoare a rândului 6 interior. Asta are sens, corect?
Odată ce ne-am instalat, vom elimina ultimul element calendar.
pentru (i = 0; i < calendar.length; i++) calendar[i] = ""; calendar = $ (" "+ calendar [i] .join (" ") +"
Acum este timpul să ne concatenăm în fiecare săptămână calendar; vom bucle peste fiecare într-o for-buclă și rândul său, intrările în rândurile de tabel, cu fiecare zi într-o celulă de tabel. Apoi, vom transforma întregul lucru într-un obiect jQuery, după ce vom pune toate rândurile de masă împreună și le vom înfășura cu o masă. Apoi vom adăuga clasa "curr" la acel tabel.
Toate celulele din tabelul gol (putem folosi pseudo-selectorul jQuery: gol pentru a le găsi), pentru a obține clasa "zero".
Dacă creăm un calendar pentru luna curentă, vom găsi celula pentru ziua de azi și îi vom da clasa "azi"; îl putem găsi prin trecerea unei funcții în metoda filtru jQuery. Funcția returnează true dacă textul celulei corespunde datei.
În cele din urmă, vom crea obiectul finit și îl vom pune în memoria cache. De ce facem calendar proprietate o funcție? Ei bine, dacă tocmai am întors un obiect jQuery, o dată l-am adăugat în calendar și apoi am mutat-o într-o altă lună, masa ar fi eliminată din DOM; mai târziu, dacă revenim la acea lună, elementul nu va apărea deoarece cache-ul face referință la acel element DOM. Deci, folosim metoda clonei jQuery pentru a returna o copie a elementului DOM. Apoi, eticheta primește numele lunii din matricele de luni și se concatenă cu acel an. În cele din urmă, vom returna obiectul.
Au fost efectuate! Înapoi în fișierul index.html, vom adăuga o etichetă de script cu aceasta:
var cal = CALENDAR (); cal.init ();
Asta e! Iată cum arată produsul nostru finit!
Dar nu vă pot arăta funcționalitatea; va trebui să verificați singur codul! Vă mulțumim pentru lectură!
