Latest web development tutorials

jQuery UI-CSS-Framework API

jQuery UI-CSS-Framework

jQuery UI enthält einen leistungsstarken CSS-Framework, um benutzerdefinierte jQuery-Widgets und Design zu erstellen. Rahmen enthält die erforderlichen gemeinsamen Klassen Benutzeroberfläche und kann jQuery UI Themeroller Wartung verwendet werden. Durch Ihre eigenen UI-Komponenten unter Verwendung von jQuery UI-CSS-Framework zu erstellen. Sie müssen Sharemark Convention, um die Stecker in die Code-Integration in die Gemeinschaft zu verwenden.

Framework-Klassen

Sind die folgenden CSS - Klasse Stile werden nach dem strukturierten fixiert ist , oder ob es Themable (Farben, Schriften, Hintergründe, etc.), sind definiert in ist ui.core.css und ui.theme.css zwei Dateien. Diese Klassen sind für die Elemente der Benutzeroberfläche entworfen, um die optische Harmonie in der gesamten Anwendung zu erreichen, von jQuery UI Themeroller von Komponenten Thematisierung.

Layout-Assistent

  • .ui-helper-hidden : die Elemente der Anwendung auf display: none .
  • .ui-helper-hidden-accessible : die Elemente der Anwendung die versteckte (absolute Positionierung von Seite) zuzugreifen.
  • .ui-helper-reset : Die grundlegenden Stil UI - Elemente zurückgesetzt. Zurücksetzen Elemente wie: padding , margin , text-decoration , List-Stil, und so weiter.
  • .ui-helper-clearfix : Anwendung der Elternelement float Verpackungseigenschaften.
  • .ui-helper-zfix : für <iframe> Element anwenden iframe "fix" CSS.

Widget-Container

  • .ui-widget : Klasse auf der Außenseite des Behälters alle Widgets anzuwenden. Widget-Anwendung für die Schriftart und Schriftgröße, sondern auch auf der gleichen Schrift aus dem Antragsformular Elemente und 1em Schriftgröße mit dem Windows-Browser hintereinander zu bewältigen.
  • .ui-widget-header : Titel Container - Anwendung Klasse. Von dem Element und Text der seine Kinder, Links, Symbole gelten Überschrift Stil Container.
  • .ui-widget-content : Klasse Inhalt des Behältnisses Anwendungen. Von dem Element und seine Kinder Text, Links, Symbole Anwendungsinhalt Container Stil. (Kann auf das übergeordnete Element Titel oder Geschwister angewendet werden)

Interaktive Zustand

  • .ui-state-default : Klicken Sie auf die Schaltfläche Element Klasse angewendet werden. Von dem Element und seine Kinder Text, Links, Symbole Anwendung "klickbare default" Stil-Container.
  • .ui-state-hover : Maus ausgesetzt , wenn sie in einen anklickbaren Button - Element angewendet , wenn auf Klasse. Von dem Element und seine Kinder Text, Links, Symbole Anwendung "klickbare schweben" Container-Stil.
  • .ui-state-focus : Anwendungsklasse , wenn der Tastaturfokus in einen anklickbaren Button - Element. Von dem Element und seine Kinder Text, Links, Symbole Anwendung "klickbare schweben" Container-Stil.
  • .ui-state-active : Anwendungsklasse , wenn ein Mausklick auf die Schaltfläche Element klicken. Von dem Element und seine Kinder Text, Links, Symbole Anwendung "klickbare aktiv" Container-Stil.

Interaktive Prompt Cues

  • .ui-state-highlight : zu markieren oder die Klasse Element Anwendungen auswählen. Von dem Element und seine Kinder Text, Links, Symbole Anwendung "Highlight" Container-Stil.
  • .ui-state-error : Fehlermeldung Containerelement Anwendungen Klasse. Von dem Element und seine Kinder Text, Links, Symbole Anwendung "Fehler" Container-Stil.
  • .ui-state-error-text : nicht nur gegen die Hintergrundfarbe des Textes Klasse Anwendungsfehler. Es kann verwendet werden, um Etiketten zu bilden, Unterfarbanwendungssymbol Fehlersymbol zu sein.
  • .ui-state-disabled : UI - Elemente anwenden eine dunkle Opazität zu deaktivieren. Es bedeutet, dass die Elemente einer bereits definierten Stil zusätzliche Stil hinzuzufügen.
  • .ui-priority-primary : Klasse von erster Priorität Taste Anwendungen. Anwendung des mutigen Textes.
  • .ui-priority-secondary : Klasse von zweiter Priorität Taste Anwendungen. Die Anwendung von normalem Gewicht Textelemente gelten leichte Transparenz.

Symbol

Der Status und Bild

  • .ui-icon : Basisklasse des Symbol Element der Anwendung. Legen Sie die Größe von 16px Plätzen, in den Text der "Inhalt" Status Sprite versteckt das Hintergrundbild einstellen. Hinweis: .ui-icon , Klasse ein anderes Hintergrundbild Sprite auf seinem übergeordneten Container auf Basis bekommen. Zum Beispiel ui-state-default Container ui-icon Element nach ui-state-default Färbung Symbolfarbe.

Symbol Typ

In einer Erklärung .ui-icon nach dem Unterricht, dann können Sie eine zweite Geschwindigkeit von der Art der Ikone der Klasse deklarieren. Unter normalen Umständen folgt das Symbol Klasse die Syntax .ui-icon-{icon type}-{icon sub description}-{direction} .

Zum Beispiel zeigt ein Dreieck - Symbol rechts, wie folgt: .ui-icon-triangle-1-e

jQuery UI Themeroller in seiner Vorschau Spalte bietet eine vollständige Palette von CSS - Framework - Symbol. Bewegen Sie die Maus auf das Symbol über den Klassennamen anzuzeigen.

Weitere bilder

Radius Assistent

  • .ui-corner-tl : linke obere Ecke des Applikationselements Radius.
  • .ui-corner-tr : die rechte obere Ecke des Applikationselements Radius.
  • .ui-corner-bl : linke untere Ecke des Applikationselements Radius.
  • .ui-corner-br : die untere rechte Ecke des Applikationselements Radius.
  • .ui-corner-top : linke obere Ecke des Applikationselements Radius.
  • .ui-corner-bottom : die Elemente der unteren linken Ecke des Anwendungsradius.
  • .ui-corner-right : Diagonalelemente der oberen und der unteren rechten Ecke des Anwendungsradius.
  • .ui-corner-left : Diagonalelemente der oberen und der unteren linken Seite des Anwendungsradius.
  • .ui-corner-all : alle vier Ecken Einsatzradius des Elements.

Cover & Schatten

  • .ui-widget-overlay : 100% der Bildschirmbreite und Höhe der Anwendung abzudecken, und die Hintergrundfarbe / Textur und Opazität des Bildschirms eingestellt.
  • .ui-widget-shadow : Klasse von Anwendungsabdeckung, setzen Sie die Opazität, die Offset- / links versetzt und Schatten "Dicke" . Die Dicke ist von allen Seiten in den Schattensatz Margen (Padding) angewendet wurden. Offset durch die Randeinstellung (Marge) und den linken Rand (Margin) angewendet wurden (kann positiv sein, es kann negativ sein).