jQuery UI und ThemeRoller
Wenn Sie die Benutzeroberfläche für eine Website oder Webanwendung auf einfache und schnelle Weise entwerfen und auch jQuery einbeziehen möchten, lesen Sie die jQuery-Benutzeroberfläche. Dort finden Sie ein schlüsselfertiges Kombinationspaket für CSS- und jQuery-Funktionen, mit dem das Hinzufügen dieser Funktionen zu Ihrem neuen Projekt zum Kinderspiel wird.

Machen wir einen Spaziergang durch die Website. Unter dem Link Demos und Dokumente finden Sie eine Liste der interaktiven jQuery-Plugins wie Drag & Drop, Registerkarten und Übergänge. Für jedes Plugin gibt es eine Demo, eine Dokumentation und einen Beispielcode zum Ausschneiden und Einfügen zum Testen.

Wenn Sie die schlüsselfertigen Dateien abrufen möchten, klicken Sie auf den Link Themen für den jQuery ThemeRoller. Das Standard-CSS ist ein weiß-graues Thema. Sie können auf die Schaltfläche zum Herunterladen klicken und unverändert verwenden. Es gibt jedoch auch eine Galerie mit farbenfrohen Themen, mit denen Sie beginnen können. Im Galeriebereich gibt es mehrere Themen-Miniaturansichten. Klicken Sie einfach auf die gewünschte. Sie können das Thema so herunterladen, wie es ist, indem Sie auf die Registerkarte Eigenes Rollen und dann auf die Schaltfläche Thema herunterladen klicken. Der Spaß beginnt jedoch, wenn Sie das Thema mit der ThemeRoller-Engine twittern. Es gibt 11 Optionen, die Sie anpassen können. Mit den meisten Optionen können Sie die Hintergrundtextur und -farbe, die Rahmenfarbe sowie die Text- und Symbolfarben ändern.

Sie haben mehrere Möglichkeiten, das Thema zu twittern.

  • Schriftarteinstellungen: Sie können die Schriftfamilie, das Gewicht und die Größe ändern.

  • Eckenradius: Sie können den Eckenradius ändern. Jedes Thema hat einen standardmäßigen abgerundeten Tabulatorstil. Hier können Sie jedoch die Größe der Ecke ändern oder für einen quadratischen Tabulator auf Null setzen. (Die Registerkarten basieren auf CSS3, das derzeit vom IE nicht unterstützt wird.)

  • Kopfzeile / Symbolleiste: Sie können die Farbwerte für den Bereich hinter den Registerkarten und die Kopfzeilenbereiche festlegen, z. B. für das Kalender-Plugin.

  • Inhalt: Hier können Sie die Farben für den Hauptinhaltsbereich festlegen. Sie können ein ganz anderes Design erhalten, je nachdem, ob Sie einen Rand oder keinen Rand wählen.

  • Klickbarer Standardstatus: Hiermit wird das standardmäßige (inaktive) Erscheinungsbild der Registerkarten und Schaltflächen gesteuert.

  • Klickbarer Schwebezustand: Diese Steuerelemente dienen zum Anzeigen der Registerkarten und Schaltflächen im Schwebezustand.

  • Klickbarer aktiver Status: Steuert das Erscheinungsbild der Registerkarte und der Schaltfläche für die aktive Seite.

  • Hervorheben: Die Hintergrund-, Rahmen-, Text- und Symbolfarben für hervorgehobene Bereiche.

  • Fehler: Hintergrund-, Rahmen-, Text- und Symbolfarben für Fehlermeldungen.

  • Modaler Bildschirm für Überlagerungen: Steuert die Hintergrundfarbe und -textur.

  • Schlagschatten: Steuert die Deckkraft, Dicke, den Versatz und die Ecken der Schatten für einen Schlagschatteneffekt.

Wenn Sie die Datei jquery-ui-x.x.xx.custom.zip herunterladen und das Paket hochladen, werden drei Ordner (CSS, Entwicklungspaket und JS) und eine Datei index.html angezeigt. Die Datei index.html ist eine Demo für die Plugins, die mit Ihrem Thema gestaltet wurden. Sie sollten die Ordner css und js in Ihrem Hauptverzeichnis ablegen und den Code aus der Datei index.html in den Code für Ihre Site an der Stelle kopieren / einfügen, an der die Plugins angezeigt werden sollen.

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/


Video-Anleitungen: Theming Theme Roller Customizations in JQuery UI (March 2024).