Share
Nel premio di oggi tutorial e screencast, Ti mostrerò come costruire un slick widget per il calendario. Useremo i CSS3 per dargli un aspetto brillante e aggiungeremo alcune funzionalità abbastanza accurate con JavaScript.
Seguo il blog 365PSD, un sito molto carino che offre un PSD gratuito, solitamente un piccolo pezzo di interfaccia utente, ogni giorno. Per il Day 81, c'era davvero un widget per il calendario. Ho pensato che non sarebbe stato troppo difficile costruire la cosa reale, quindi ti mostrerò come farlo oggi!
Inizieremo creando la nostra struttura HTML. Certo, inizieremo con lo scheletro:
Calendar Widget
Quindi, all'interno del corpo, inizieremo con a div per avvolgere tutto; quindi, avremo tre sezioni principali al suo interno:
Primo, abbiamo div.header; guardando indietro al nostro PSD, possiamo vedere che questo corrisponde alla parte superiore, la sezione che contiene il mese, i commutatori del mese e le associazioni. Poi abbiamo un tavolo per i nomi dei giorni. Finalmente, abbiamo un div # cal-frame. Questa è la griglia del calendario.
Ti farò conoscere un segreto: quando ho creato questa interfaccia utente del calendario, avevo solo un tavolo con a thead per i giorni e a tbody per la griglia del calendario; ma una volta che ho iniziato a scrivere il codice JavaScript per passare da un mese all'altro, è diventato evidente che avevo bisogno di usare qualcosa di più flessibile. Vedrai perché quando arriveremo al JavaScript.
Quindi, lancia questo in quell'intestazione:
⟨ 20 giugno e 0 ⟩
Abbiamo cinque elementi qui; sugli esterni, abbiamo i commutatori di calendario sinistro e destro; dal momento che non volevo utilizzare alcuna immagine in questo progetto, ho trovato le entità HTML ⟨ e & rang (⟨e⟩, rispettivamente). Quindi, abbiamo due span vuoti per i binding del calendario. Infine, abbiamo l'etichetta mese / anno nel mezzo.
Il contenuto per il tabella # giorni è piuttosto semplice:
sole mon mar sposare thu fri sat
Finalmente, abbiamo il coraggio di div # cal-frame; dai un'occhiata, e poi ne discuteremo:
| 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 |
Allora, cosa abbiamo qui? Fondamentalmente, stiamo creando la griglia del calendario con una tabella (in seguito, inseriremo il mese corrente in modo dinamico). Le celle appropriate hanno i numeri di data; se le celle sono vuote, hanno la classe "nil"; infine, la data odierna ha la classe "oggi".
E davvero, questa è l'estensione dell'HTML; non c'è molto da vedere adesso, ma ecco quello che abbiamo:
Iniziamo con un ambiente:
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); margine: 50px auto; font: 13px / 1.5 "Helvetica Neue", Helvatica, Arial, san-serif; display: table;
Piuttosto ovvio, eh? Dopo aver impostato un colore di sfondo, stiamo centrando il widget del calendario in orizzontale e gli abbiamo dato un'ombra di riquadro. Ovviamente, impostiamo il carattere. Ma perché impostiamo il display sul tavolo? Per impostazione predefinita, a div verrà visualizzato in blocco, il che significa che occuperà l'intera larghezza disponibile; visualizzandolo come tabella, occuperà la larghezza più piccola possibile (pur continuando a contenere i suoi figli) e continuerà a essere un elemento di blocco.
Successivamente, concentriamoci sulla barra dell'intestazione:
#cal .header cursor: default; sfondo: # cd310d; background: -moz-linear-gradient (in alto, # b32b0c, # cd310d); background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# b32b0c), a (# cd310d)); altezza: 34px; posizione: relativa; color: #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; font-weight: bold; text-shadow: 0px -1px 0 # 87260C; text-transform: maiuscolo; #cal .header span display: inline-block; line-height: 34px;
Ecco la prima parte dello stile dell'intestazione; iniziamo impostando il cursore su un puntatore; a modo loro, il testo non sembra essere selezionabile. Quindi, imposteremo un colore di sfondo rosso; tuttavia, se il browser lo supporta, utilizzeremo un gradiente di sfondo: non dimenticare di aggiungerlo sia per mozilla che per il webkit! Quindi, imposta l'altezza a 34 px; imposteremo la posizione su relativo, perché i bambini saranno posizionati in modo assoluto; posizionando relativamente l'elemento genitore, i bambini saranno posizionati assolutamente contro il genitore, invece del corpo. Imposta il colore del testo su bianco, attorno agli angoli in alto a sinistra e a destra e rendi il carattere grassetto. Quindi, crea una leggera ombra di testo per far apparire il testo indentato. Infine, trasforma il testo in maiuscolo.
Ciascuno degli elementi nell'intestazione è un campata; ognuno di questi verrà visualizzato come blocco in linea. Inoltre, dai loro un'altezza della riga di 34 px (l'altezza dell'intestazione).
Questi span hanno anche alcune classi speciali, quindi diamo un'occhiata a quelli:
#cal .header .hook width: 9px; altezza: 28 px; posizione: assoluta; inferiore: 60%; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; sfondo: #ececec; background: -moz-linear-gradient (in alto a destra, #fff, # 827e7d); background: -webkit-gradient (lineare, in alto a destra, in basso a destra, da (#fff), a (# 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%;
Innanzitutto, abbiamo la classe "hook"; ricorda, questi sono i ganci, o associazioni, del calendario. Imposteremo la larghezza e l'altezza. Quindi, posizionalo assolutamente. Quindi, lo sposteremo dal 60% in basso. Gireremo l'angolo abbastanza per far guardare le associazioni attorno. Quindi, imposteremo un colore di sfondo; se il browser supporta i gradienti, sostituiremo lo sfondo solido con una sfumatura. Poi, daremo loro un'ombra di scatola.
Quindi utilizzeremo le classi di posizione per posizionare i ganci orizzontalmente; se l'elemento ha entrambe le classi "hook" e "right", spostalo del 15% da destra; se ha la classe "sinistra", spostala del 15% da sinistra.
Ora abbiamo i pulsanti di cambio mese:
#cal .header .button width: 24px; text-align: center; position: absolute; #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 solid # ae2a0c; #cal .header .right.button right: 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 .header .button: hover background: -moz-linear-gradient (in alto, # d94215, # bb330f); background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# d94215), a (# bb330f));
Imposteremo la larghezza su questi pulsanti e centreremo il testo; ovviamente, avremo bisogno di posizionarli assolutamente pure. Quindi, per il pulsante sinistro, lo spostiamo completamente a sinistra e intorno a quello in alto a sinistra. Per il pulsante destro, va a destra e arrotonda l'angolo in alto a destra.
Infine, aggiungeremo un effetto hover per i pulsanti; ovviamente, useremo un gradiente.
C'è ancora un elemento da abbinare: è l'etichetta del mese.
#cal .header .month-year letter-spacing: 1px; larghezza: 100%; allineamento del testo: centro;
Useremo il spaziatura del carattere per dare ai personaggi un po 'più di respiro. Quindi, forniremo una larghezza del 100% e centreremo il testo. Dato che tutti gli elementi di pari livello sono posizionati in modo assoluto, dare questa larghezza completa fa esattamente quello che vogliamo.
Quindi questo è l'intero header! Devo dire che anche se abbiamo posizionato la maggior parte degli elementi in modo assoluto, perché utilizziamo le percentuali per posizionarli, tutto si adatta perfettamente quando si alza o si abbassa la dimensione del carattere nel browser.
Bene, passiamo alle intestazioni del giorno.
#cal table background: #fff; border-collapse: crollo; #cal td color: # 2b2b2b; larghezza: 30px; altezza: 30px; line-height: 30px; text-align: center; border: 1px solid # e6e6e6; cursore: predefinito; #cal #days td height: 26px; altezza della linea: 26px; text-transform: uppercase; font-size: 90%; color: # 9e9e9e; #cal #days td: not (: last-child) border-right: 1px solid #fff;
Iniziamo con due selettori leggermente più generici: l'intestazione del giorno e la griglia del calendario sono entrambe le tabelle, quindi la prima regola si applica a entrambi: stiamo impostando lo sfondo su bianco e comprimendo i bordi. Quando i bordi della tabella sono compressi, non hanno padding tra loro e le celle adiacenti condividono i bordi. Quindi, per tutte le celle della tabella, assegneremo loro un colore per il testo, impostandone la larghezza, l'altezza e l'altezza della linea a 30 px e centrando il testo. Ricevono tutti un bordo e il cursore predefinito (una freccia / un puntatore);
Quindi, aggiungeremo uno stile specifico per le celle della tabella nella tabella dei giorni: ridurremo un po 'la loro altezza e altezza della linea, assicuriamoci che siano maiuscole e resettiamo la dimensione del carattere e il colore del testo. ( Nota: nello screencast accompagnatorio, ho scritto #giorno invece di #days nel selettore per il terzo blocco sopra e mai corretto; assicurati di aver capito bene!)
Qual è la regola finale sopra per? Bene, attualmente, ci sono bordi grigi chiari sulle celle dei nomi dei giorni. Vogliamo cambiare il colore dei bordi a destra in bianco, quindi non sono visibili. Tuttavia, non vogliamo farlo all'ultima cella della riga. Quindi, possiamo usare due pseudo-classi. : non prenderà un selettore escluso "parametro". : last-child cattura l'ultimo figlio degli elementi che abbiamo già selezionato: in questo caso, sono le celle della tabella. Quindi, impostiamo il bordo destro su bianco solido.
#cal # cal-frame td.today background: #ededed; color: # 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: not (.nil): hover color: #fff; text-shadow: # 6C1A07 0px -1px; background: # CD310D; background: -moz-linear-gradient (in alto, # b32b0c, # cd310d); background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# b32b0c), a (# cd310d)); -moz-box-shadow: 0px 0px 0px; -webkit-box-shadow: 0px 0px 0px;
Queste due regole sono finalizzate alla griglia del calendario. Per la cella della tabella con la classe "oggi", impostiamo lo sfondo su un grigio chiaro e il testo su un grigio più scuro. Successivamente, impostiamo un'ombra di casella: è un'ombra bianca, ma non stiamo usando alcuna sfocatura, quindi è una linea bianca; stiamo spingendo verso l'alto e verso destra un pixel, quindi otteniamo un effetto di bordo secondario. Si noti che stiamo aggiungendo "inset" alla dichiarazione shadow della casella, in modo che l'ombra si trovi all'interno della cella.
La prossima regola applica un effetto hover a tutte le celle della tabella nella griglia del calendario, ad eccezione di quelle con la classe "nil"; impostiamo il testo in bianco e aggiungiamo un'ombra di testo. Quindi, cambiamo lo sfondo in rosso, usando una sfumatura quando possiamo. Includiamo la rimozione dell'ombra della scatola in modo specifico per la cella "oggi".
C'è un caso speciale che non abbiamo ancora menzionato; prendi il tuo calendario più vicino, no, non iCal, sto parlando di un vero calendario cartaceo con albero morto e guardi, oh, dici, nell'ottobre 2010. Noterai che l'ultima settimana ha una cella raddoppiata, con entrambi i 24esimo e il 31st nella stessa piazza. Dovremo farlo, quindi facciamo lo stile per questo.
Il modo in cui lo evidenziamo è inserendo ogni data in un intervallo all'interno della cella della tabella.
#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;
In primo luogo, posizioniamo il campatas relativamente e restringe il loro carattere solo un pelo; Quindi, spostiamo il primo su 5px e il secondo su 5px.
Faremo ancora una cosa; quando passiamo da un mese all'altro, vogliamo svanire da uno all'altro; ciò richiede che le due tabelle siano l'una sopra l'altra. Possiamo ottenere ciò con questo:
#cal # cal-frame table.curr float: left; #cal # cal-frame table.temp position: absolute;
Quello che stiamo svanendo avrà una classe di "temp"; il nuovo che stiamo portando a stare (per un po ') avrà la classe "curr".
E questo è tutto per il CSS! Passiamo ora ad alcune funzionalità.
Rendiamo facile riutilizzare le funzionalità del nostro calendario; alla luce di ciò, inizieremo con questo scheletro:
var CALENDAR = function () var wrap, label, months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre" , "Ottobre", "Novembre", "Dicembre"]; function init (newWrap) function switchMonth (next, month, year) function createCal (year, month) createCal.cache = ; return init: init, switchMonth: switchMonth, createCal: createCal; ;
Quindi creiamo tre funzioni all'interno della nostra funzione CALENDARIO; uno inizializzerà il widget del calendario, il secondo si sposterà tra i mesi e il terzo creerà effettivamente la griglia del calendario; notare quella linea dopo: createCal.cache = ; ne parleremo anche noi!
Abbiamo anche creato tre variabili nella parte superiore: daremo avvolgere e etichetta valori all'interno dentro, ma mesi sono una matrice con i nomi dei mesi.
Ecco il contenuto del nostro dentro funzione:
Accentsconagua
wrap = $ (newWrap || "#cal"); label = wrap.find ("# etichetta"); wrap.find ("# prev"). bind ("click.calendar", function () switchMonth (false);); wrap.find ("# next"). bind ("click.calendar", function () switchMonth (true);); label.bind ("click", function () switchMonth (null, new Date (). getMonth (), new Date (). getFullYear ());); label.click (); Iniziamo dando avvolgere e etichetta i valori appropriati: si noti che utilizziamo il selettore passato a dentro per trovare il wrap, ma tornare a "#cal" se non ne viene fornito uno. Quindi, associamo eventi di clic ai pulsanti del calendario successivo e precedente; questi chiamano il switchMonth funzione; se vogliamo il prossimo calendario, passiamo vere, altrimenti passiamo false.
però, switchMonth può anche prendere altri due parametri; li useremo per l'evento click sull'etichetta. Quando l'utente fa clic sul nome del mese, passeremo al mese corrente; quindi, passeremo nel mese corrente e all'anno, che possiamo ottenere dal JavaScript Data oggetto. Non dimenticare di impostare il prossimo parametro su null!
Un'altra cosa (e un suggerimento bonus, che non è nello screencast!): Quando l'utente carica la pagina, vogliamo caricare il mese corretto nel mese in cui è codificato. Il modo più semplice per farlo è chiamare il metodo jQuery click sull'etichetta senza parametri; questo simula un clic del mouse e porta il calendario al mese corrente.
Passiamo al switchMonth funzione:
var curr = label.text (). trim (). split (""), calendar, tempYear = parseInt (curr [1], 10); mese = mese || ((successivo)? ((curr [0] === "Dicembre")? 0: months.indexOf (curr [0]) + 1): ((curr [0] === "Gennaio")? 11: months.indexOf (curr [0]) - 1)); anno = anno || ((next && month === 0)? tempYear + 1: (! next && month === 11)? tempYear - 1: tempYear); Imposteremo alcune variabili nella parte superiore; dividiamo l'etichetta in un array chiamato curr; stiamo anche creando un calendario variabile e afferrando l'anno del calendario che sta attualmente mostrando.
Quindi le cose si complicano. Ho usato operatori condizionali JavaScript qui così posso mettere tutto su una riga. Piuttosto che cercare di spiegarlo, guarda questo: questo è quello che stanno facendo:
if (! month) if (next) if (curr [0] === "December") month = 0; else month = months.indexOf (curr [0]) + 1; else if (curr [0] === "January") month = 11; else month = months.indexOf (curr [0]) - 1;
Puoi capire perché l'operatore condizionale è attraente: è solo una linea. Ecco la versione estesa della variabile dell'anno:
if (! anno) if (next && month === 0) year = tempYear + 1; else if (! next && month === 11) year = tempYear - 1; else year = tempYear;
Alla fine di tutto, mese e anno saranno i valori corretti per il calendario che stiamo cercando di mostrare all'utente. Se ti sentiresti più a tuo agio, puoi sostituire queste due linee con i frammenti sopra.
Successivamente creiamo il calendario e aggiustiamo il DOM di conseguenza:
calendar = createCal (year, month); $ ("# cal-frame", wrap) .find (". curr") .removeClass ("curr") .addClass ("temp") .end () .prepend (calendar.calendar ()) .find (" .temp ") .fadeOut (" slow ", function () $ (this) .remove ();); $ ( '# Label') testo (calendar.label).; Cosa c'è nell'oggetto del calendario che torna da createCal funzione? È un oggetto, come questo:
calendar: function () / * restituisce un oggetto jquery del calendario * /, etichetta: "Month Year"
Discuteremo perché la proprietà del calendario è un metodo quando arriviamo a costruirlo. Per ora, torniamo a metterlo sulla pagina. Otterremo la cornice del calendario e troveremo il calendario di visualizzazione corrente. Quindi, rimuoveremo la classe "curr" e applicheremo la classe "temp"; poi inseriamo il nuovo calendario (che, a proposito, viene fornito con la classe "curr"), e svanisce e rimuove quello vecchio.
Bene, abbiamo solo una funzione in più da fare: createCal.
var day = 1, i, j, haveDays = true, startDay = new Date (anno, mese, giorno) .getDay (), daysInMonths = [31, (((anno% 4 == 0) && (anno% 100! = 0)) || (anno% 400 == 0))? 29: 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], calendario = [];
Ecco il nostro inizio: le variabili. abbiamo giorno, impostato su 1; abbiamo due vars per l'iterazione: io e j. Quindi, scopriamo in che giorno della settimana inizia il mese; possiamo farlo creando un oggetto Date per il primo giorno del mese e chiamando getDay.
Successivamente creiamo una matrice che contiene il numero di giorni in ogni mese; per febbraio, dobbiamo tener conto degli anni bisestili, quindi usa un'altra espressione ternaria per calcolarlo.
Infine, abbiamo l'importantissimo calendario variabile, che è una matrice.
Quindi, vogliamo usarlo nascondiglio proprietà che abbiamo messo sul createCal funzione. (Poiché tutto in JavaScript è un oggetto, anche le funzioni possono avere proprietà.)
if (createCal.cache [year]) if (createCal.cache [year] [month]) return createCal.cache [year] [month]; else createCal.cache [anno] = ;
Ecco cosa sta succedendo: c'è la possibilità che l'utente "richieda" lo stesso mese più di una volta. Una volta che lo creiamo la prima volta, non c'è bisogno di rifarlo; lo inseriremo nella cache e lo estrarremo più tardi.
Se quello nascondiglio oggetto ha una proprietà con il nome dell'anno che stiamo cercando, possiamo quindi verificare la disponibilità del mese; se abbiamo già fatto il mese, restituiremo quell'oggetto memorizzato nella cache. Se non ci sono proprietà per l'anno, ce la faremo, perché dovremo mettere il mese che stiamo per creare in esso.
Se passiamo questo punto, allora dobbiamo iniziare a creare il calendario per il mese richiesto.
i = 0; while (haveDays) calendar [i] = []; per (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 [mese]) haveDays = false; i ++;
Questo è un po 'complicato; mentre il haveDays variabile è vero, sappiamo che abbiamo giorni rimasti nel mese. Pertanto, useremo il nostro io iteratore per aggiungere un array settimanale all'array del calendario. Quindi, usiamo un ciclo for sul j iteratore, mentre è inferiore a 7; dal momento che iniziamo con 0, questo ci darà 7 giorni per l'array della settimana. All'interno del nostro ciclo, ci sono tre casi.
Per prima cosa, dobbiamo verificare se siamo nella prima settimana del mese; se lo siamo, non inizieremo necessariamente il primo giorno. Sappiamo già in quale giorno inizia il mese; questo è nel nostro StartDay variabile. Pertanto, se j === startDay, siamo nel giorno giusto per iniziare, quindi ne metteremo il valore giorno nello slot giusto. Quindi incrementiamo giorno e StartDay da uno. La prossima volta 'gira il ciclo for, j e StartDay sarà lo stesso, quindi continuerò a lavorare per il resto della settimana.
Se non siamo nella prima settimana (i! == 0), quindi ci assicureremo di avere ancora giorni per aggiungere al calendario; se è così, li inseriamo al loro posto. Infine, se non siamo nella prima settimana e non abbiamo ancora giorni da aggiungere al mese, inseriremo una stringa vuota. Quindi, imposteremo haveDays a falso.
Alla fine, controlleremo per vedere se giorno è maggiore del numero di giorni nel mese; se lo è, lo imposteremo haveDays a falso. Questo è per il caso speciale in cui il mese termina di sabato.
Certo, non dimenticare di incrementare io appena fuori dal ciclo!
if (calendar [5]) for (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);
Non vogliamo che il nostro calendario abbia più di 5 settimane; se un giorno o due si riversano nella settimana 6, dividiamo le celle nella settimana 5, come abbiamo preparato nel nostro CSS. Quindi, se c'è un 6esimo array all'interno dell'array del calendario, effettueremo il ciclo su di esso. Quindi, se il contenuto dell'elemento-matrice non è una stringa vuota, riassegneremo il valore della cella direttamente "sopra" la riga 6: avvolgeremo quel valore in uno span e concateneremo un altro intervallo con il valore appropriato della riga 6 dentro. Questo ha senso, giusto?
Una volta che saremo a posto, elimineremo l'ultimo elemento calendario.
per (i = 0; i < calendar.length; i++) calendar[i] = ""; calendar = $ (" "+ calendar [i] .join (" ") +"
Ora è il momento di concatenare ogni settimana nel nostro calendario; faremo un loop su ognuno di un ciclo for e trasformeremo le voci in righe di tabella, con ogni giorno all'interno di una cella di tabella. Quindi, trasformeremo l'intera cosa in un oggetto jQuery, dopo aver unito tutte le righe della tabella e averle avvolte con un tavolo. Quindi aggiungeremo la classe "curr" a quella tabella.
Tutte le celle della tabella vuote (possiamo usare lo pseudo-selettore jQuery: vuoto per trovarle), ottenere la classe "nil".
Se creiamo un calendario per il mese corrente, troveremo la cella per oggi e la diamo alla classe "oggi"; possiamo trovarlo passando una funzione al metodo di filtro jQuery. La funzione restituisce true se il testo della cella corrisponde alla data.
Infine, creeremo il nostro oggetto finito e lo inseriremo nella cache. Perché stiamo facendo il calendario proprietà una funzione? Bene, se abbiamo appena restituito un oggetto jQuery, dopo averlo aggiunto al calendario e spostato in un altro mese, la tabella sarebbe stata rimossa dal DOM; più tardi, se torniamo a quel mese, l'elemento non verrà mostrato perché la cache fa riferimento allo stesso elemento DOM. Quindi usiamo il metodo clone di jQuery per restituire una copia dell'elemento DOM. Quindi, l'etichetta ottiene il nome del mese dall'array dei mesi e concatenato con l'anno. Alla fine, restituiamo l'oggetto.
Sono stati fatti! Tornando al file index.html, aggiungeremo un tag script con questo:
var cal = CALENDAR (); cal.init ();
Questo è tutto! Ecco come appare il nostro prodotto finito!
Ma non posso mostrarti la funzionalità; dovrai controllare tu stesso il codice! Grazie per aver letto!
