Share
In der heutigen Prämie Tutorial und Screencast, Ich werde Ihnen zeigen, wie Sie ein Kalender-Widget erstellen. Wir werden CSS3 verwenden, um ihm ein glänzendes Aussehen zu verleihen, und dann mit JavaScript einige hübsche Funktionen hinzufügen.
Ich folge dem Blog 365PSD, einer wirklich ordentlichen Website, die jeden Tag eine kostenlose PSD (normalerweise ein kleines Stück UI) bietet. Für Tag 81 gab es wirklich ein ordentliches Kalender-Widget. Ich dachte mir, dass es nicht zu schwer sein würde, das Echte zu bauen, also werde ich euch heute zeigen, wie man das macht!
Wir beginnen mit dem Aufbau unserer HTML-Struktur. Natürlich fangen wir mit dem Skelett an:
Kalender Widget
Also beginnen wir im Körper mit einem div alles einwickeln; dann haben wir drei Hauptabschnitte darin:
Zuerst haben wir div.header; Wenn wir auf unsere PSD zurückblicken, können wir sehen, dass dies dem oberen Teil, dem Abschnitt, der den Monat, den Monatswechslern und den Bindungen enthält, entspricht. Dann haben wir eine Tabelle für die Namen der Tage. Schließlich haben wir eine div # cal-frame. Dies ist das Kalenderraster.
Ich gebe Ihnen ein Geheimnis: Als ich diese Kalenderbenutzeroberfläche ursprünglich erstellt hatte, hatte ich nur einen Tisch mit einem thead für die Tage und a Körper für das Kalenderraster; Aber als ich anfing, JavaScript zu schreiben, um zwischen den Monaten zu wechseln, wurde mir klar, dass ich etwas flexibleres verwenden musste. Sie werden sehen warum, wenn wir zum JavaScript gelangen.
Also, werfen Sie das in diesem Header hoch:
⟨ 20. Juni & 0 ⟩
Wir haben hier fünf Elemente. An den Außenseiten haben wir den linken und den rechten Kalenderwechsler. da ich in diesem Projekt keine Bilder verwenden wollte, habe ich die HTML-Entitäten gefunden ⟨ und & rang (⟨bzw.⟩). Dann haben wir zwei leere Felder für die Kalenderbindungen. Schließlich haben wir das Monat / Jahr-Label in der Mitte.
Der Inhalt für die Tabelle # Tage ist ziemlich einfach:
Sonne mon Di heiraten thu fri saß
Zum Schluss haben wir den Mut div # cal-frame; check it out und dann besprechen wir es:
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | fünfzehn | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
Was haben wir denn hier? Grundsätzlich erstellen wir das Kalenderraster mit einer Tabelle (später fügen wir den aktuellen Monat dynamisch ein). Die entsprechenden Zellen haben die Datumsnummern. Wenn die Zellen leer sind, haben sie die Klasse "Null". Endlich hat das heutige Datum die "Today" -Klasse.
Und das ist wirklich der Umfang des HTML; Im Moment gibt es nicht viel zu sehen, aber hier haben wir:
Beginnen wir mit einer Umgebung:
body background: # e0e0e0; #cal -Moz-Box-Schatten: 0px 3px 3px rgba (0, 0, 0, 0,25); -webkit-box-shadow: 0px 3px 3px rgba (0, 0, 0, 0,25); Marge: 50px auto; Schrift: 13px / 1,5 "Helvetica Neue", Helvatica, Arial, San-Serif; Anzeige: Tisch;
Ziemlich offensichtlich, wie? Nachdem Sie eine Hintergrundfarbe festgelegt haben, zentrieren wir das Kalender-Widget horizontal und geben ihm einen Box-Schatten. Natürlich legen wir die Schrift fest. Aber warum setzen wir die Anzeige auf den Tisch? Standardmäßig ist a div wird in Block angezeigt, dh es nimmt die gesamte verfügbare Breite ein; Indem es als Tabelle angezeigt wird, nimmt es die kleinste Breite an (während es noch die untergeordneten Elemente enthält) und ist dennoch ein Blockelement.
Als Nächstes konzentrieren wir uns auf die Kopfzeile:
#cal .header Cursor: Standard; Hintergrund: # cd310d; Hintergrund: -moz-linearer Gradient (oben, # b32b0c, # cd310d); Hintergrund: -webkit-gradient (linear, links oben, links unten, von (# b32b0c) bis (# cd310d)); Höhe: 34px; Position: relativ; Farbe: #fff; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; Rand oben links Radius: 5px; Rand oben rechts Radius: 5px; Schriftdicke: fett; Text-Schatten: 0px -1px 0 # 87260C; Text-Transformation: Großbuchstaben; #cal .header span display: Inline-Block; Zeilenhöhe: 34px;
Hier ist der erste Teil der Kopfzeile. Wir beginnen damit, den Cursor auf einen Zeiger zu setzen. Auf diese Weise scheint der Text nicht auswählbar zu sein. Dann setzen wir eine rote Hintergrundfarbe. Wenn der Browser dies unterstützt, verwenden wir einen Hintergrundverlauf: Vergessen Sie nicht, ihn für Mozilla und Webkit hinzuzufügen! Stellen Sie dann die Höhe auf 34px ein; Wir setzen die Position auf relativ, da die Kinder absolut positioniert sind. Wenn Sie das übergeordnete Element relativ positionieren, werden die Kinder absolut gegen das übergeordnete Element und nicht gegen den Körper positioniert. Setzen Sie die Textfarbe auf Weiß, runden Sie die oberen linken und rechten Ecken ab und machen Sie die Schrift fett. Geben Sie dann einen leichten Textschatten an, damit der Text eingerückt erscheint. Zum Schluss wandeln Sie den Text in Großbuchstaben um.
Jedes der Elemente in der Kopfzeile ist a Spanne; Jeder von ihnen wird als Inline-Block angezeigt. Geben Sie ihnen auch eine Zeilenhöhe von 34px (die Höhe der Kopfzeile)..
Diese Bereiche haben auch einige spezielle Klassen, also schauen wir uns diese an:
#cal .header .hook width: 9px; Höhe: 28px; Position: absolut; Boden: 60%; Grenzradius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; Hintergrund: #ececec; Hintergrund: -moz-linearer Gradient (rechts oben, #fff, # 827e7d); Hintergrund: -webkit-gradient (linear, rechts oben, rechts unten, von (#fff) bis (# 827e7d)); Box-Schatten: 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); .highhook right: 15%; . linkshaken left: 15%;
Erstens haben wir die Klasse "Haken"; Denken Sie daran, dies sind die Haken oder Bindungen des Kalenders. Wir werden die Breite und Höhe einstellen. Dann positionieren Sie es absolut. Dann werden wir es von den unteren 60% nach oben verschieben. Wir werden genug um die Ecke gehen, damit die Bindungen sich umsehen. Dann setzen wir eine Hintergrundfarbe. Wenn der Browser Farbverläufe unterstützt, wird der Hintergrund mit einem Farbverlauf überschrieben. Dann geben wir ihnen einen Kastenschatten.
Wir verwenden dann die Standortklassen, um die Haken horizontal zu positionieren. Wenn das Element sowohl die Klasse "Haken" als auch "Rechts" hat, verschieben Sie es um 15% von rechts. Wenn es die "linke" Klasse ist, verschieben Sie es um 15% von links.
Jetzt haben wir die Schaltflächen zum Wechseln des Monats:
#cal .header .button width: 24px; Text ausrichten: Mitte; Position: absolut; #cal .header .left.button left: 0; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; Rand oben links Radius: 5px; Rahmen rechts: 1px fest # ae2a0c; #cal .header .right.button right: 0; oben: 0; Rahmen links: 1px fest # ae2a0c; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; Rand oben rechts Radius: 5px; #cal .header .button: hover Hintergrund: -moz-linearer Farbverlauf (oben, # d94215, # bb330f); Hintergrund: -webkit-gradient (linear, links oben, links unten, von (# d94215) bis (# bb330f));
Wir werden die Breite für diese Schaltflächen festlegen und den Text zentrieren. Natürlich müssen wir sie auch absolut positionieren. Für den linken Knopf bewegen wir ihn dann ganz nach links und links oben. Bei der rechten Taste geht es nach rechts und rundet die rechte obere Ecke.
Schließlich fügen wir einen Hover-Effekt für die Schaltflächen hinzu. natürlich verwenden wir einen Farbverlauf.
Es gibt noch ein weiteres Element zum Gestalten: Das ist das Label des Monats.
#cal .header .month-year Zeichenabstand: 1px; Breite: 100%; Text ausrichten: Mitte;
Wir werden die verwenden Buchstaben-Abstand um den Charakteren etwas mehr Raum zum Atmen zu geben. Dann geben wir dem Bereich eine Breite von 100% und zentrieren den Text. Da alle Geschwisterelemente absolut positioniert sind, erfüllt die volle Breite genau das, was wir wollen.
Das ist also der ganze Header! Ich sollte erwähnen, dass, obwohl wir die meisten Elemente absolut positioniert haben, weil wir sie mithilfe von Prozentsätzen positionieren, alles perfekt skaliert, wenn Sie die Schriftgröße im Browser erhöhen oder verringern.
Okay, lass uns zu den Tagesüberschriften übergehen.
#cal table Hintergrund: #fff; Grenzzusammenbruch: Zusammenbruch; #cal td color: # 2b2b2b; Breite: 30px; Höhe: 30px; Zeilenhöhe: 30px; Text ausrichten: Mitte; Grenze: 1px fest # e6e6e6; Cursor: Standard; #cal #days td height: 26px; Zeilenhöhe: 26px; Text-Transformation: Großbuchstaben; Schriftgröße: 90%; Farbe: # 9e9e9e; #cal #days td: nicht (: letztes Kind) border-right: 1px solid #fff;
Wir beginnen mit zwei etwas mehr generischen Selektoren: Die Tagesüberschrift und das Kalenderraster sind beide Tabellen. Die erste Regel gilt für beide: Wir setzen den Hintergrund auf Weiß und reduzieren die Ränder. Wenn Tabellenränder minimiert werden, haben sie keine Auffüllung und angrenzende Zellen teilen sich die Grenzen. Dann geben wir ihnen für alle Tabellenzellen eine Textfarbe, legen Sie Breite, Höhe und Zeilenhöhe auf 30 Pixel fest und zentrieren Sie den Text. Sie erhalten alle einen Rand und den Standardcursor (einen Pfeil / Zeiger).
Anschließend fügen wir ein bestimmtes Styling für die Tabellenzellen in der Days-Tabelle hinzu: Wir reduzieren ihre Höhe und Zeilenhöhe etwas, stellen sie sicher, dass sie Großbuchstaben sind, und setzen die Schriftgröße und Textfarbe zurück. ( Hinweis: im begleitenden screencast schrieb ich #Tag anstatt #Tage in der Auswahl für den dritten Block oben und korrigierte ihn nie; stellen Sie sicher, dass Sie es richtig machen!)
Wofür ist die letzte Regel? Nun, derzeit gibt es hellgraue Ränder in den Tagesnamenszellen. Wir möchten die Farbe der Ränder rechts in Weiß ändern, damit sie nicht sichtbar sind. Wir möchten dies jedoch nicht bis zur letzten Zelle in der Zeile tun. Wir können also zwei Pseudoklassen verwenden. : not nimmt keinen "Parameter" für die Auswahl an. : last-child greift das letzte Kind der Elemente, die wir bereits ausgewählt haben: in diesem Fall sind dies die Tabellenzellen. Dann setzen wir einfach den rechten Rand auf durchgehend weiß.
#cal # cal-frame td.today background: #ededed; Farbe: # 8c8c8c; Box-Schatten: 1px 1px 0px #fff Einfügung; -moz-box-shadow: 1px 1px 0px #fff-Einfügung; -webkit-box-shadow: 1px 1px 0px #fff-Einfügung; #cal # cal-frame td: nicht (.nil): hover color: #fff; Text-Schatten: # 6C1A07 0px -1px; Hintergrund: # CD310D; Hintergrund: -moz-linearer Gradient (oben, # b32b0c, # cd310d); Hintergrund: -webkit-gradient (linear, links oben, links unten, von (# b32b0c) bis (# cd310d)); -moz-box-shadow: 0px 0px 0px; -webkit-box-shadow: 0px 0px 0px;
Diese beiden Regeln richten sich an das Kalenderraster. Für die Tabellenzelle mit der Klasse "heute" setzen wir den Hintergrund auf hellgrau und den Text auf ein dunkleres Grau. Als Nächstes setzen wir einen Box-Schatten: Es ist ein weißer Schatten, aber wir verwenden keine Unschärfe, also eine weiße Linie. Wir drücken es nach rechts und ein Pixel nach rechts, sodass wir einen sekundären Randeffekt erhalten. Beachten Sie, dass wir der Schattendeklaration "Einfügung" hinzufügen, sodass sich der Schatten in der Zelle befindet.
Die nächste Regel wendet einen Hover-Effekt auf alle Tabellenzellen im Kalendergitter an, mit Ausnahme derjenigen mit der Klasse "Null". Wir setzen den Text auf Weiß und fügen einen Textschatten hinzu. Dann ändern wir den Hintergrund in Rot und verwenden, wenn möglich, einen Verlauf. Wir schließen die Box-Schattenentfernung speziell für die "Heute" -Zelle ein.
Es gibt einen Sonderfall, den wir noch nicht erwähnt haben. Schnapp dir deinen nächsten Kalender - nein, nicht iCal, ich spreche von einem echten Papierkalender mit totem Baum - und schau, oh, sag Oktober 2010. sowohl mit den 24th und die 31st auf dem gleichen Platz. Wir müssen das tun, also lasst uns dafür stylen.
Wir werden dies markieren, indem wir jedes Datum in einer Zeitspanne innerhalb der Tabellenzelle angeben.
#cal # cal-frame td span font-size: 80%; Position: relativ; #cal # cal-frame td span: first-child bottom: 5px; #cal # cal-frame td span: last-child top: 5px;
Zuerst positionieren wir die Spannes relativ und schrumpfen ihre Schrift nur ein Haar; Dann bewegen wir den ersten um 5px und den zweiten um 5px.
Wir machen noch eine Sache. Wenn wir zwischen Monaten wechseln, wollen wir von einem zum anderen übergehen. Dies erfordert, dass die beiden Tische übereinander liegen. Das können wir damit erreichen:
#cal # cal-frame table.curr float: left; #cal # cal-frame table.temp position: absolut;
Die, die wir ausblenden, wird eine Klasse von "Temp" haben; Das Neue, das wir einbringen, um (für eine Weile) zu bleiben, wird die Klasse "curr" haben.
Und das wars für das CSS! Kommen wir nun zu einigen Funktionen.
Wir machen die Funktionalität für unseren Kalender einfach wiederzuverwenden. In Anbetracht dessen beginnen wir mit diesem Skelett:
var CALENDAR = function () var wrap, label, months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September" , "Oktober November Dezember"]; function init (newWrap) function switchMonth (nächster Monat, Jahr) Funktion createCal (year, month) createCal.cache = ; return init: init, switchMonth: switchMonth, createCal: createCal; ;
Wir erstellen also drei Funktionen innerhalb unserer CALENDAR-Funktion. Der eine wird das Kalender-Widget initialisieren, der zweite wird zwischen den Monaten verschoben und der dritte erstellt tatsächlich das Kalenderraster. Beachten Sie diese Zeile danach: createCal.cache = ; wir werden das auch besprechen!
Wir haben auch drei Variablen an der Spitze erstellt: wir geben wickeln und Etikette Werte innerhalb drin, Monate ist jedoch ein Array mit den Namen der Monate.
Hier ist der Inhalt unseres drin Funktion:
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, neues Datum (). getMonth (), neues Datum (). getFullYear ());); label.click (); Wir beginnen mit dem Geben wickeln und Etikette die entsprechenden Werte: Beachten Sie, dass wir den an den übergebenen Selektor verwenden drin um wrap zu finden, aber zurück zu "#cal", falls einer nicht bereitgestellt wird. Dann binden wir Klickereignisse an die nächsten und vorherigen Kalenderschaltflächen. diese nennen das switchMonth Funktion; Wenn wir den nächsten Kalender wünschen, übergeben wir wahr, andernfalls falsch.
jedoch, switchMonth kann auch zwei weitere Parameter annehmen; Wir werden diese für das Klickereignis auf dem Etikett verwenden. Wenn der Benutzer auf den Monatsnamen klickt, wechseln wir zum aktuellen Monat. Wir werden also im laufenden Monat und im laufenden Jahr vorbeikommen, die wir aus dem JavaScript erhalten können Datum Objekt. Vergessen Sie nicht, den nächsten Parameter auf null zu setzen!
Eine weitere Sache (und ein Bonus-Tipp, der nicht im Screencast enthalten ist!): Wenn der Benutzer die Seite lädt, möchten wir den korrekten Monat über den Monat laden, in dem der Code hartcodiert ist. Die einfachste Möglichkeit ist, die jQuery-Klickmethode auf dem Etikett ohne Parameter; Dies simuliert einen Mausklick und bringt den Kalender auf den aktuellen Monat.
Gehen wir weiter zum switchMonth Funktion:
var curr = label.text (). trim (). split (""), kalender, tempYear = parseInt (curr [1], 10); Monat = Monat || ((weiter)? ((curr [0] === "Dezember")? 0: months.indexOf (curr [0]) + 1): ((curr [0] === "January")? 11: monate.indexOf (curr [0]) - 1)); jahr = jahr || ((nächster && Monat === 0)? tempYear + 1: (! nächster && Monat === 11)? tempYear - 1: tempYear); Wir werden oben ein paar Variablen setzen; Wir teilen das Label in ein Array namens auf curr; wir schaffen auch eine Kalender variabel und greifen auf das Jahr des aktuell angezeigten Kalenders.
Dann werden die Dinge kompliziert. Ich habe hier JavaScript-bedingte Operatoren verwendet, damit ich alles auf eine Zeile setzen kann. Anstatt zu versuchen, es zu erklären, probieren Sie es aus: Folgendes tun sie:
if (! month) if (next) if (curr [0] === "Dezember") month = 0; else month = months.indexOf (curr [0]) + 1; else if (curr [0] === "Januar") Monat = 11; else month = months.indexOf (curr [0]) - 1;
Sie sehen, warum der bedingte Operator attraktiv ist: Er ist nur eine Zeile. Hier ist die erweiterte Version der Jahresvariablen:
if (! year) if (nächster && Monat === 0) Jahr = tempYear + 1; else if (! next && month === 11) year = tempYear - 1; else year = tempYear;
Am Ende alles, Monat und Jahr werden die korrekten Werte für den Kalender sein, den wir dem Benutzer anzeigen möchten. Wenn Sie sich wohler fühlen, können Sie diese beiden Zeilen durch die obigen Ausschnitte ersetzen.
Als Nächstes erstellen wir den Kalender und passen das DOM entsprechend an:
Kalender = createCal (Jahr, Monat); $ ("# cal-frame", wrap) .find (". curr") .removeClass ("curr") .addClass ("temp") .end () .prepend (calendar.calendar ()). find (" .temp ") .fadeOut (" slow ", function () $ (this) .remove ();); $ ('# label'). text (calendar.label); Was ist in dem Kalenderobjekt, das vom zurückgegeben wird? createCal Funktion? Es ist ein Objekt wie dieses:
calendar: function () / * gibt ein Jquery-Objekt des Kalenders zurück * /, Label: "Month Year"
Wir werden besprechen, warum die Kalendereigenschaft eine Methode ist, wenn wir sie erstellen. Jetzt wollen wir es auf die Seite setzen. Wir erhalten den Kalenderrahmen und finden den aktuellen Kalender. Dann entfernen wir die Klasse "curr" und wenden die Klasse "temp" an. dann setzen wir den neuen Kalender ein (der übrigens zur Klasse "curr" gehört) und blenden aus und entfernen den alten Kalender.
Nun, wir haben nur noch eine weitere Funktion: createCal.
var day = 1, i, j, haveDays = true, startDay = new Datum (Jahr, Monat, Tag) .getDay (), daysInMonths = [31 (((Jahr% 4 == 0) && (Jahr% 100!)! = 0)) || (Jahr% 400 == 0))? 29: 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], Kalender = [];
Hier ist unser Start: die Variablen. Wir haben Tag, auf 1 setzen; wir haben zwei vars für die Iteration: ich und j. Dann ermitteln wir, an welchem Wochentag der Monat beginnt. Wir können dies tun, indem wir ein Date-Objekt für den ersten Tag des Monats erstellen und aufrufen getDay.
Als Nächstes erstellen wir ein Array, das die Anzahl der Tage in jedem Monat enthält. Für Februar müssen wir Schaltjahre berücksichtigen, verwenden Sie daher einen anderen ternären Ausdruck, um dies zu berechnen.
Schließlich haben wir das sehr Wichtige Kalender Variable, die ein Array ist.
Als nächstes wollen wir das nutzen Zwischenspeicher Eigentum, das wir auf die setzen createCal Funktion. (Da alles in JavaScript ein Objekt ist, können sogar Funktionen Eigenschaften haben.)
if (createCal.cache [year]) if (createCal.cache [year] [month]) return createCal.cache [year] [month]; else createCal.cache [year] = ;
Hier ist, was los ist: Es besteht die Möglichkeit, dass der Benutzer denselben Monat mehrmals anfordert. Sobald wir das erste Mal erstellt haben, müssen Sie es nicht erneut erstellen. Wir legen es in den Cache und ziehen es später heraus.
Wenn das Zwischenspeicher object hat eine Eigenschaft mit dem Namen des Jahres, nach dem wir suchen. Wir können dann die Verfügbarkeit des Monats prüfen. Wenn wir den Monat bereits erstellt haben, geben wir das zwischengespeicherte Objekt zurück. Wenn es keine Immobilie für das Jahr gibt, schaffen wir es, denn wir müssen den Monat, den wir schaffen, darin anlegen.
Wenn wir diesen Punkt überschreiten, müssen wir den Kalender für den angeforderten Monat erstellen.
i = 0; while (haveDays) calendar [i] = []; für (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 ++;
Dies ist ein kompliziertes Stück. während habtage Variable ist wahr, wir wissen, dass wir im Monat noch Tage haben. Deshalb verwenden wir unsere ich Iterator, um dem Kalender-Array ein Week-Array hinzuzufügen. Dann verwenden wir eine for-Schleife für die j Iterator, während es weniger als 7 ist; Da wir mit 0 beginnen, erhalten Sie 7 Tage für das Out-Week-Array. In unserer for-Schleife gibt es drei Fälle.
Zuerst müssen wir überprüfen, ob wir uns in der ersten Woche des Monats befinden. Wenn dem so ist, fangen wir nicht unbedingt am ersten Tag an. Wir wissen bereits, an welchem Tag der Monat beginnt. das ist in unserem startDay Variable. Wenn also j === startDay, Wir sind am richtigen Tag, um zu beginnen, also setzen wir den Wert von Tag im rechten Slot. Dann erhöhen wir uns Tag und startDay einzeln. Nächstes Mal um die For-Schleife, j und startDay wird das gleiche sein, so dass es für den Rest der Woche weiterarbeiten wird.
Wenn wir nicht in der ersten Woche sind (i! == 0), dann sorgen wir dafür, dass wir noch Tage übrig haben, um sie dem Kalender hinzuzufügen. Wenn ja, setzen wir sie ein. Wenn wir nicht in der ersten Woche sind und dem Monat keine Tage mehr zur Verfügung stehen, setzen wir stattdessen eine leere Zeichenfolge ein. Dann setzen wir uns habtage zu falsch.
Am Ende prüfen wir, ob Tag ist größer als die Anzahl der Tage im Monat; Wenn ja, setzen wir uns habtage zu falsch Dies gilt für den Sonderfall, bei dem der Monat an einem Samstag endet.
Vergiss natürlich nicht zu erhöhen ich gleich außerhalb der for-Schleife!
if (calendar [5]) für (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);
Wir möchten nicht, dass unser Kalender mehr als 5 Wochen hat. Wenn ein oder zwei Tage in Woche 6 übergehen, teilen wir die Zellen in Woche 5 auf, wie wir es in unserem CSS vorbereitet haben. Also, wenn es eine 6 gibtth Array innerhalb des Kalender-Arrays, wir werden es durchlaufen. Wenn der Inhalt des Array-Elements keine leere Zeichenfolge ist, weisen wir den Wert der Zelle direkt "über" Zeile 6 zu: Wir wickeln diesen Wert in einen Bereich und verketten einen anderen Bereich mit dem entsprechenden Zeilenwert 6 innen. Das macht Sinn, richtig?
Sobald wir alles eingerichtet haben, schneiden wir das letzte Element aus Kalender.
für (i = 0; i < calendar.length; i++) calendar[i] = ""; Kalender = $ (" "+ Kalender [i] .join (" ") +"
Jetzt ist es an der Zeit, jede Woche in unserer Datenbank zu verketten Kalender; Wir durchlaufen jeden in einer for-Schleife und wandeln die Einträge in Tabellenzeilen um, wobei sich jeder Tag in einer Tabellenzelle befindet. Dann werden wir das Ganze in ein jQuery-Objekt verwandeln, nachdem wir alle Tabellenzeilen zusammengefügt und mit einer Tabelle umschlossen haben. Wir fügen dann die Klasse "curr" zu dieser Tabelle hinzu.
Alle leeren Tabellenzellen (wir können den jQuery-Pseudo-Selector verwenden: leer, um sie zu finden), erhalten Sie die Klasse "nil".
Wenn wir einen Kalender für den aktuellen Monat erstellen, finden wir die Zelle für heute und geben ihr die Klasse "today". Sie finden es, indem Sie eine Funktion an die jQuery-Filtermethode übergeben. Die Funktion gibt true zurück, wenn der Text der Zelle mit dem Datum übereinstimmt.
Zum Schluss erstellen wir unser fertiges Objekt und legen es in den Cache. Warum machen wir das Kalender Eigenschaft eine Funktion? Wenn wir gerade ein jQuery-Objekt zurückgeben, sobald wir es dem Kalender hinzugefügt und dann in einen anderen Monat verschoben haben, wird die Tabelle aus dem DOM entfernt. Wenn wir später zu diesem Monat zurückkehren, wird das Element nicht angezeigt, da der Cache auf dasselbe DOM-Element verweist. Daher verwenden wir die Klonmethode von jQuery, um eine Kopie des DOM-Elements zurückzugeben. Label erhält dann den Monatsnamen aus dem Monats-Array und verkettet diesen mit dem Jahr. Zum Schluss geben wir das Objekt zurück.
Wir sind fertig! Zurück in der Datei index.html fügen wir ein Skript-Tag mit folgendem Code hinzu:
var cal = CALENDAR (); cal.init ();
Das ist es! So sieht unser fertiges Produkt aus!
Aber ich kann Ihnen die Funktionalität nicht zeigen. Sie müssen den Code selbst überprüfen! Danke fürs Lesen!
