Wie ein Design für Ihre AJAX-Elemente für HTML5 und CSS3 Programmierung hinzufügen
Das jQuery Thema Werkzeug macht es ganz einfach, Ihre Elemente durch CSS3 zu dekorieren. Die große Sache über jQuery Themen ist, dass sie semantisch das heißt, Sie mit dem Mehrzweck des Elements angeben und dann lassen Sie das Thema die entsprechende spezifische CSS anwenden. Sie können die Anwendung Themeroller verwenden, um auf einfache Weise neue Themen erstellen oder vorhandene ändern.
Viele der jQuery Interface-Elemente automatisch den aktuellen CSS Thema verwenden. Natürlich können Sie diese auch auf alle Ihre eigenen Elemente anwenden ein einheitliches Erscheinungsbild zu erhalten.
Themen sind einfach CSS-Klassen. Um ein CSS Thema auf ein Element anwenden, können Sie nur eine spezielle Klasse für das Objekt hinzuzufügen.
Zum Beispiel können Sie einen Absatz aussehen wie die aktuelle Definition des Fabrikats ui-Widget durch diesen Code, um es und fügte hinzu:
Mein div sieht nun wie ein Widget
Natürlich verletzt Klassen in den HTML Hinzufügen eines der Prinzipien der semantischen Design, so ist es besser, die Arbeit in javascript mit jQuery zu tun:
Funktion Themify () {// hinzufügen themenbasierte CSS die elements$("div").addClass("ui-widget").addClass("ui-widget-content").addClass("ui-corner-all")-$(":header").addClass("ui-widget-header").addClass("ui-corner-all")-$("#resizeMe").append(' ') -}Das Themify () Funktion fügt alle Themen auf die Elemente auf der Seite, die ziemlich jQuery Thema, um es anzuwenden.
Identifizieren Sie alle divs mit jQuery.
Ergänzen Sie die ui-Widget Klasse für alle divs.
Diese Klasse wird in das Thema definiert. Alle jQuery Themen haben diese Klasse definiert sind, aber die Besonderheiten unterscheiden sich je nach Thema. Auf diese Weise können Sie ein Thema tauschen das Aussehen zu ändern, und der Code funktioniert immer noch. Das ui-Widget Klasse definiert ein Element als Widget.
Hinzufügen ui-widget-Gehalt auch.
Die divs müssen zwei Klassen zu haben angebracht, so dass einige Programmierer verwenden Verkettung festlegen, dass divs auch Mitglieder der Klasse sein sollte. Dies ui-Widget-Inhalt Klasse zeigt an, dass der Inhalt des Widgets gestylt werden sollen.
Angeben abgerundeten Ecken.
Abgerundete Ecken haben ein Standard der Web-2.0-visuelle Design geworden. Dieser Effekt ist extrem einfach mit jQuery zu erreichen - fügen Sie einfach die UI-Ecke-all Klasse auf ein beliebiges Element Sie abgerundete Ecken haben.
Abgerundete Ecken verwenden CSS3, die von allen Browsern noch nicht unterstützt wird. Ihre Seite wird nicht angezeigt, abgerundete Ecken in älteren Browsern, aber die Seite wird immer noch anders funktionieren.
Nehmen Sie alle Schlagzeilen auf das Widget-Header-Stil entsprechen.
Die jQuery Themen sind eine schöne Schlagzeile Stil. Sie können ganz einfach alle Überschriften-Tags (H1 bis H6) machen dieses Thema folgen. Verwenden Sie die :Kopfzeile filtern, um alle Positionen zu identifizieren und gelten die ui-Widget-Kopfzeile und UI-Ecke-all Klassen zu diesen Header.
Das jQuery UI-Paket unterstützt eine Reihe von interessanten Klassen.
| Klasse | Benutzt auf | Beschreibung |
|---|---|---|
| ui-Widget | Der äußere Behälter des Widget | Macht Element wie ein Widget aussehen. |
| ui-Widget-header | Heading Element | Gilt unverwechselbare Position Aussehen. |
| ui-Widget-Inhalte | Widget | Gilt Widget Inhalt Stil Element und Kinder. |
| ui-State-default | klickbare Elemente | Zeigt Standard (unclicked) Zustand. |
| ui-state-Hover | klickbare Elemente | Zeigt schweben Zustand. |
| ui-state-Fokus | klickbare Elemente | Displays konzentrieren Zustand, wenn das Element den Tastaturfokus hat. |
| ui-state-aktiv | klickbare Elemente | Zeigt aktiven Zustand, wenn die Maus auf das Element geklickt wird. |
| ui-state-Highlight | Jedes Widget oder Element | Gibt an, dass ein Element zur Zeit markiert ist. |
| ui-State-Fehler | Jedes Widget oder Element | Gibt an, dass ein Element einen Fehler oder Warning enthält. |
| ui-state-Fehlertext | Textelement | Ermöglicht Fehlerhervorhebung ohne andere Elemente zu ändern (vor allem in Form Validierung). |
| ui-State-disabled | Jedes Widget oder Element | Zeigt, dass ein Widget zur Zeit deaktiviert. |
| ui-Ecke-all, ui-Ecke-tl (etc) | Jedes Widget oder Element | Fügt aktuelle Ecke Größe eines Elements. Geben Sie specificcorners mit tl, tr, bl, br, oben, unten, links, rechts. |
| ui-Widget-Schatten | Alle Widget | Gilt Schatteneffekt auf ein Widget. |
Einige andere Klassen sind in UI-Themen definiert, aber diese sind die am häufigsten verwendeten. Wenden Sie sich an der aktuellen Dokumentation jQuery UI für weitere Details.
Wie ein Symbol hinzufügen
Beachten Sie den kleinen Start, die innerhalb des Elements erscheint. Dieses Element ist ein Beispiel für ein Symbol jQuery UI. Alle jQuery Themen unterstützen einen Standardsatz von Symbolen, die kleine (16px Quadrat) Bilder sind. Das Icon Set enthält Standard-Icons für Pfeile sowie Bilder häufig in Menüs und Symbolleisten verwendet.
Einige jQuery UI-Elemente verwenden Symbole automatisch, aber Sie können sie auch direkt hinzufügen. Um ein Symbol in Ihren Programmen verwenden, gehen Sie folgendermaßen vor:
Fügen Sie ein jQuery UI-Thema.
Die Symbole sind Teil des Themenpaket. Fügen Sie die CSS-Stylesheet, das mit dem Thema entspricht.
Achten Sie darauf, dass die Bilder zugänglich sind.
Wenn Sie ein Thema-Paket herunterladen, enthält es ein Verzeichnis von Bildern. Die Bilder in diesem Verzeichnis aufgenommen werden verwendet, um benutzerdefinierte Hintergründe sowie Symbole zu erstellen. Die CSS-Datei erwartet, ein Verzeichnis zu sein im selben Verzeichnis wie die CSS genannt.
Dieses Verzeichnis sollte mehrere Bilder enthalten, die beginnen mit UI-Symbole. Diese Bilder enthalten alle notwendigen Symbole. Falls das Symbol Bilddateien nicht verfügbar sind, werden nicht angezeigt, die Symbole.
Erstellen Sie eine Spanne, wo Sie das Symbol angezeigt werden soll.
Stellen Sie eine leere span-Element, wo immer Sie das Symbol wollen im HTML erscheinen. Sie können die Spanne direkt im HTML platzieren, wenn Sie wollen, oder Sie können es durch jQuery hinzufügen.
Bringen Sie dieUI-Symbol Klasse auf die Spanne.
Dies sagt jQuery die Spanne als Symbol zu behandeln. Der Inhalt der Spanne wird ausgeblendet, und die Spanne ein 16-Pixel-Quadrat-Symbol Bild zu halten, der Größe verändert werden.
Bringen Sie eine zweite Klasse das spezifische Symbol zu identifizieren.
Schauen Sie sich die Seite Themeroller die verfügbaren Symbole zu sehen. Wenn Sie über ein Symbol auf dieser Seite schweben, können Sie den Namen der Klasse mit dem Symbol zugeordnet sind.
Sie können den Code direkt in Ihren HTML wie folgt hinzu:
Das ist mein Text
Alternativ können Sie jQuery verwenden Sie den entsprechenden Code zu Ihrem Element hinzuzufügen:
. $ ( "# MyPara") anhängen ( '') -