Anpassen und Theming von jQuery UI Datepicker

Die jQuery-Benutzeroberfläche ist einfach großartig und aufgrund ihrer einfachen Bedienung beliebt und wird in fast allen Websites eingesetzt, die interaktive Funktionen benötigen.

In diesem Beitrag betrachten wir eine der bereitgestellten Funktionen, das Datepicker-Widget.

Wir werden versuchen, das Kalenderdesign anzupassen, damit Sie Ihr eigenes Design erstellen können, das Ihrem Gesamtdesign entspricht. Sie benötigen jedoch ein wenig Verständnis für JavaScript und müssen sich mit CSS vertraut machen, bevor Sie dieses Lernprogramm ausführen.

Demo
Quelle herunterladen

Wenn du bereit bist, lass uns anfangen.

Die Vermögenswerte

Lassen Sie uns einige der wichtigsten Elemente für den Kalender vorbereiten.

Zunächst bezieht sich das Kalenderdesign auf diese PSD-Datei von Premium Pixels. Laden Sie es also zuerst herunter, damit wir die Farben, die wir brauchen, probieren können. Laden Sie dann zwei Muster von herunter Subtil Muster dass wir als Hintergrund für unseren Kalender verwenden. In diesem Beispiel haben wir uns für folgende Muster entschieden: schwarzer Denim und dunkles Leder.

Wir benötigen auch ein Web-Entwicklungstool wie Firebug, um Elementklassen / IDs zu prüfen, die von der jQuery-Benutzeroberfläche generiert werden.

Nun, ich denke wir hatten genug Vorbereitung. Nun zum ersten Schritt.

Schritt 1: jQuery UI Datepicker

Gehen Sie zuerst zur jQuery UI-Download-Seite. Auf dieser Seite werden folgende Optionen angezeigt: der UI-Kern, Widgets, Interaktionen und Effekte.

Wir sollten Deaktivieren Sie alle Komponenten, da wir nicht alle brauchen.

Dann in der Widgets Wählen Sie nur den Datepicker aus. Die jQuery-Benutzeroberfläche wählt automatisch die wesentlichen Abhängigkeiten aus und anschließend herunterladen die Datei.

Verknüpfen Sie alle heruntergeladenen Dateien - außer dem CSS - in Ihrem leeren HTML-Dokument wie folgt:

Schritt 2: Anpassen des Datepickers

In diesem Schritt konfigurieren wir einen Datepicker mit den folgenden Optionen.

Der obige Code weist die jQuery an, den Kalender auf einem Element mit anzuzeigen Datumsauswahl Ich würde. Also müssen wir folgendes setzen div tag mit - datepicker ID - im Hauptteil, um den Kalender zu bilden:

Der Kalender sollte jetzt bereits erstellt worden sein und so aussehen, ganz ohne Stile, hat aber trotzdem die Funktionalität.

Schritt 3: Die Stile

Beginnen wir nun mit der Gestaltung des Kalenders. Wir beginnen mit der Normalisierung aller Elemente - wie üblich - und erstellen ein neues Stylesheet. In diesem Beispiel nenne ich es datepicker.css. Verbinden Sie sie dann alle mit dem HTML-Dokument.

Dann fügen wir zuerst einen Hintergrund an den Körper an, damit unser HTML-Code nicht zu einfach aussieht.

body Hintergrund: URL ('… /img/darkdenim3.png') Wiederholung 0 0 # 555;

Als Nächstes legen Sie die Breite des Datumsauswahlers fest, positionieren Sie ihn in der Mitte und fügen Sie Schlagschatten hinzu, um dem Kalender den Prominece-Effekt zu verleihen.

.ui-datepicker width: 216px; Höhe: Auto; Marge: 5px Auto 0; Schrift: 9pt Arial, serifenlos; -webkit-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5); -moz-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5); Box-Schatten: 0px 0px 10px 0px rgba (0, 0, 0, .5);

Wir werden auch die standardmäßige Unterstreichungsverzierung von jedem Ankertag entfernen.

.ui-datepicker a Textdekoration: keine;

Der Kalender in der jQuery-Benutzeroberfläche wird mit einem gebildet Tabelle. Also, fügen wir hinzu 100% Breite für die Tabelle, es hat also die gleiche maximale Breite wie der Wrapper oben; das ist 216px

.ui-datepicker table width: 100%;

Styling der Kopfzeile

Der Datepicker enthält einen Header-Abschnitt Monat Jahr des Kalenders. Dieser Abschnitt wird die dunkle Ledertextur haben, die wir zuvor mit leicht weißer Schriftfarbe und heruntergeladen haben 1px weißer Schatten an der Spitze.

.ui-datepicker-header background: url ('… /img/dark_leather.png') repeat 0 0 # 000; Farbe: # e0e0e0; Schriftdicke: fett; -webkit-box-shadow: Einfügung von 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: Einfügung 0px 1px 1px 0px rgba (250, 250, 250, .2); Box-Schatten: Einfügung 0px 1px 1px 0px rgba (250, 250, 250, .2); Text-Schatten: 1px -1px 0px # 000; filter: dropshadow (color = # 000, offx = 1, offy = -1); Zeilenhöhe: 30px; Randbreite: 1px 0 0 0; Bordüre: solide; Rahmenfarbe: # 111;

Als nächstes lass uns die zentrieren Monat Position.

 .ui-datepicker-title text-align: center;

Ersetze das Nächster und Vorige Text mit den Sprite-Pfeilbildern, die von der PSD geschnitten wurden.

.ui-datepicker-prev, .ui-datepicker-next Anzeige: Inline-Block; Breite: 30px; Höhe: 30px; Text ausrichten: Mitte; Cursor: Zeiger; Hintergrundbild: URL ('… /img/arrow.png'); Hintergrundwiederholung: keine Wiederholung; Zeilenhöhe: 600%; Überlauf versteckt;

Passen Sie dann die Pfeilposition an.

.ui-datepicker-prev float: left; Hintergrundposition: Mitte -30px;  .ui-datepicker-next float: right; Hintergrundposition: Mitte 0px;

Während Tagesnamen Abschnitt ist in eine verpackt thead, Basierend auf unserer Designreferenz hat es einen leicht weißen Farbverlauf. Um unsere Aufgabe zu vereinfachen, verwenden wir dieses Tool zur Erzeugung des Gradientencodes:

.ui-datepicker thead background-color: # f7f7f7; Hintergrundbild: -moz-linearer Gradient (oben, # f7f7f7 0%, # f1f1f1 100%); Hintergrundbild: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # f7f7f7), Farbstopp (100%, # f1f1f1)); Hintergrundbild: -webkit-linearer Gradient (oben, # f7f7f7 0%, # f1f1f1 100%); Hintergrundbild: -o-linearer Gradient (oben, # f7f7f7 0%, # f1f1f1 100%); Hintergrundbild: -ms-linearer Gradient (oben, # f7f7f7 0%, # f1f1f1 100%); Hintergrundbild: linearer Gradient (oben, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); Rahmen unten: 1px fest #bbb;

Das Tagesnamen Text hat die dunkelgraue Farbe von # 666666 und sie werden auch ein dünnes Weiß haben Text-Schatten um den gedrückten Effekt zu geben.

.ui-datepicker th text-transform: Großbuchstaben; Schriftgröße: 6pt; Polsterung: 5px 0; Farbe: # 666666; Text-Schatten: 1px 0px 0px #fff; filter: dropshadow (color = # fff, offx = 1, offy = 0);

An diesem Punkt sieht der Kalender folgendermaßen aus:

Termine gestalten

Die Kalenderdaten sind innerhalb von angegeben td oder Tabellendaten. Wir setzen also die Auffüllung auf 0 um die Leerzeichen zwischen den td und geben Sie einen rechten Rand von 1px.

.ui-datepicker tbody td padding: 0; Rahmen rechts: 1px fest #bbb;

Bis auf den letzten td, das wird keine rechte Grenze haben. Wir setzen hierfür den rechten Rand auf 0.

.ui-datepicker tbody td: last-child border-right: 0px;

Die Tabellenzeile wird fast gleich sein. Es hat einen unteren Rand von 1 Pixel, mit Ausnahme der letzten Reihe.

.ui-datepicker tbody tr border-bottom: 1px solid #bbb;  .ui-datepicker tbody tr: last-child border-bottom: 0px;

Gestaltung des Standard-, Hover- und Aktivzustandes

In diesem Schritt definieren wir den Datums-Hover und die aktiven Stile. Wir definieren zuerst den Standardstatus des Datums, indem wir die Dimension angeben. zentrieren Sie die Datumstextposition, fügen Sie die Verlaufsfarbe und den inneren weißen Schatten hinzu.

.ui-datepicker td span, .ui-datepicker td a display: Inline-Block; Schriftdicke: fett; Text ausrichten: Mitte; Breite: 30px; Höhe: 30px; Zeilenhöhe: 30px; Farbe: # 666666; Text-Schatten: 1px 1px 0px #fff; filter: dropshadow (color = # fff, offx = 1, offy = 1);  .ui-datepicker-calendar .ui-state-default background: #ededed; Hintergrund: -moz-linearer Gradient (oben, #ededed 0%, #dedede 100%); Hintergrund: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # ededed), Farbstopp (100%, # dedede)); Hintergrund: -webkit-linearer Gradient (oben, #ededed 0%, # 100% abziehen); Hintergrund: -o-linearer Gradient (oben, #ededed 0%, # 100% abziehen); Hintergrund: -ms-linearer Gradient (oben, #ededed 0%, # 100% abziehen); Hintergrund: linearer Gradient (oben, #ededed 0%, # ziehen 100% ab); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: Einfügung von 1px 1px 0px 0px rgba (250, 250, 250, 0,5); -moz-box-shadow: Einfügen von 1px 1px 0px 0px rgba (250, 250, 250, 0,5); Box-Schatten: Einfügung 1px 1px 0px 0px rgba (250, 250, 250, 0,5);  .ui-datepicker-nicht auswählbar .ui-state-default background: # f4f4f4; Farbe: # b4b3b3;

Wenn Sie den Mauszeiger über das Datum bewegen, wird es leicht weiß.

 .ui-datepicker-calendar .ui-state-hover background: # f7f7f7;

Wenn das Datum aktiv ist, werden die folgenden Stile verwendet.

 .ui-datepicker-calendar .ui-state-active background: # 6eafbf; -webkit-box-shadow: Einfügung von 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: Einfügung von 0px 0px 10px 0px rgba (0, 0, 0, .1); Box-Schatten: Einfügung 0px 0px 10px 0px rgba (0, 0, 0, .1); Farbe: # e0e0e0; Text-Schatten: 0px 1px 0px # 4d7a85; filter: dropshadow (color = # 4d7a85, offx = 0, offy = 1); Grenze: 1px fest # 55838f; Position: relativ; Marge: -1px;

Nun sollte der Kalender viel besser aussehen.

Position fixieren

Schauen Sie sich das Datum genau an. Wenn Sie auf das Datum in der ersten oder letzten Spalte klicken, werden Sie feststellen, dass der aktive Status ein Pixel über die Kalenderkante hinausfließt.

Hier werden wir ein paar kleine Korrekturen vornehmen.

Zuerst reduzieren wir die Datumsbreite auf 29px, und setzen Sie den rechten Rand der letzten Spalte und den linken Rand der ersten Spalte auf 0 umzukehren -1px Marge haben wir zuvor für den aktiven Zustand festgelegt.

.ui-datepicker-calendar td: first-child .ui-state-active width: 29px; Rand links: 0;  .ui-datepicker-calendar td: last-child .ui-state-active width: 29px; Rand rechts: 0;

Das Datum in der letzten Zeile des Kalenders wird ebenfalls ähnlich behandelt.

.ui-datepicker-calendar tr: last-child .ui-state-active height: 29px; Rand unten: 0;

Nun wollen wir das Ergebnis sehen. Nun, der Kalender sieht jetzt schön aus und passt perfekt als unsere Designreferenz. Sie können die Demo sehen und die Quelle herunterladen, um den Code anhand der Links unter dem Bild zu überprüfen.

Demo
Quelle herunterladen

Bonus: Erweitern Sie den Kalender

Nun, wir haben heute eine Menge gelernt, wie man ein benutzerdefiniertes Design für die jQuery UI Datepicker erstellt. Aber Sie sollten hier nicht aufhören, da es noch viele Dinge gibt, die mit diesem Datepicker erweitert werden können. Abhängig von Ihren jQuery- und CSS-Kenntnissen erweitern Sie den Kalender wie folgt: Texteingabe mit Overlay-Datumsauswahl.

Demo
Quelle herunterladen

Lesen Sie weiter

Weitere Informationen zur jQuery-Benutzeroberfläche. Sie können die vollständige Dokumentation hier lesen:

Erste Schritte mit der jQuery-Benutzeroberfläche
Theming jQUery UI
jQuery-Benutzeroberfläche: Theming-API-Klassen

Abschließende Gedanken

Vielen Dank für das Lesen und Befolgen dieses Tutorials. Ich hoffe, Sie finden es nützlich. Wenn Sie etwas Feedback haben oder Dinge hinzufügen möchten, die möglicherweise in diesem Lernprogramm fehlen, können Sie im Kommentarbereich darauf hinweisen. Danke noch einmal).