jQuery UI CSS API cadre

framework jQuery UI CSS

jQuery UI comprend un framework CSS puissant, afin de créer des widgets jQuery et de design. Cadre contient les classes d'interface utilisateur commune requises, et peut être utilisé de maintenance jQuery UI ThemeRoller. En créant vos propres composants d'interface utilisateur en utilisant framework jQuery UI CSS. Vous devez utiliser Convention Sharemark, afin de brancher l'intégration communautaire de code.

classes de cadres

Sont les styles suivants de classe CSS sont fixés en fonction de la structuré, ou si elle est themable (couleurs, polices, arrière - plans, etc.), sont définis dans ui.core.css et ui.theme.css deux fichiers. Ces classes sont conçues pour les éléments de l'interface utilisateur afin de parvenir à une cohérence visuelle dans toute l'application, par jQuery UI ThemeRoller de composants thématisation.

Helper Disposition

• .ui-helper-hidden : les éléments de l'application display: none .
• .ui-helper-hidden-accessible : les éléments de l'application pour accéder au cache (positionnement absolu par page).
• .ui-helper-reset : Les éléments de base de l' interface utilisateur de style réinitialisés. Réinitialiser des éléments tels que: padding , margin , text-decoration , Liste de style, et ainsi de suite.
• .ui-helper-clearfix : application des propriétés d'emballage float élément parent.
• .ui-helper-zfix : pour <iframe> élément applique iframe "fix" CSS.

container Widget

• .ui-widget : Classe à l'extérieur du récipient pour appliquer tous les widgets. l'application Widget pour la police et la taille, mais aussi sur la même police à partir des éléments de formulaire de demande et 1em la taille pour faire face avec Windows succession du navigateur.
• .ui-widget-header : title application conteneur classe. De l'élément et le texte de ses enfants, des liens, des icônes Appliquer le titre conteneur de style.
• .ui-widget-content : contenu de classe d'applications de conteneurs. De l'élément et le texte de ses enfants, liens, icônes contenu de l'application de style de conteneur. (Peut être appliqué sur le titre de l'élément parent ou frères et sœurs)

Etat interactive

• .ui-state-default : Cliquez sur l'élément de bouton peut être appliqué de classe. De l'élément et le texte de ses enfants, des liens, l'application des icônes contenant de style "par défaut cliquable".
• .ui-state-hover : souris suspendue lorsqu'elle est appliquée dans un élément de bouton cliquable quand de classe. De l'élément et le texte de ses enfants, des liens, l'application des icônes de style conteneur "hover cliquable".
• .ui-state-focus : Application de classe lorsque le focus du clavier dans un élément de bouton cliquable. De l'élément et le texte de ses enfants, des liens, l'application des icônes de style conteneur "hover cliquable".
• .ui-state-active : Classe d' application quand un clic de souris peut cliquer sur l'élément de bouton. De l'élément et le texte de ses enfants, des liens, des icônes de style de l'application conteneur "cliquable active".

Cues invite interactive

• .ui-state-highlight : pour mettre en surbrillance ou sélectionner les applications d'éléments de classe. De l'élément et le texte de ses enfants, des liens, des icônes de style demande de conteneurs "highlight".
• .ui-state-error : message d' erreur contenant des applications d'éléments de classe. De l'élément et le texte de ses enfants, des liens, icônes application "erreur" style de conteneur.
• .ui-state-error-text : non seulement contre la couleur de l'erreur d'application du texte Classe d'arrière - plan. Il peut être utilisé pour former des étiquettes d'être sous-couleur icône de l'application icône d'erreur.
• .ui-state-disabled : pour désactiver les éléments d'interface appliquent une opacité faible. Cela signifie que les éléments d'un style déjà défini pour ajouter le style supplémentaire.
• .ui-priority-primary : Classe de premières applications de bouton de priorité. Application de texte en gras.
• .ui-priority-secondary : Classe de seconde applications de bouton de priorité. Application des éléments de texte de poids normale applique une légère transparence.

icône

Statut et de l'image

• .ui-icon : Classe de base de l'élément d'icône de l'application. Définissez la taille de 16px carrés, caché dans le texte de l'image-objet "content" d'état définir l'image d'arrière-plan. Remarque: .ui-icon , classe obtiendra une autre image de fond sprite basé sur son conteneur parent. Par exemple, ui-state-default par ui-icon ui-state-default ui-state-default contenant ui-icon élément selon ui-state-default par ui-state-default coloration couleur de l' icône.

Icône Type

Dans une déclaration .ui-icon après la classe, alors vous pouvez déclarer une seconde vitesse du type d'icône de la classe. Dans des circonstances normales, la classe d'icône suit la syntaxe .ui-icon-{icon type}-{icon sub description}-{direction} .

Par exemple, une icône de triangle pointant vers la droite, comme suit: .ui-icon-triangle-1-e

jQuery UI de ThemeRoller dans sa colonne de prévisualisation fournit une gamme complète de framework CSS icône. Passez la souris sur l'icône pour afficher le nom de la classe.

Autres visuels

Rayon assistant

• .ui-corner-tl : coin supérieur gauche du rayon de l' élément d'application.
• .ui-corner-tr : le coin supérieur droit du rayon de l' élément d'application.
• .ui-corner-bl : coin inférieur gauche du rayon de l' élément d'application.
• .ui-corner-br : le coin inférieur droit du rayon de l' élément d'application.
• .ui-corner-top : coin supérieur gauche du rayon de l' élément d'application.
• .ui-corner-bottom : les éléments du coin inférieur gauche du rayon d'application.
• .ui-corner-right : éléments diagonaux de la droite supérieure et inférieure du rayon d'application.
• .ui-corner-left : les éléments diagonaux de la partie supérieure gauche et inférieure du radius de l' application.
• .ui-corner-all : les quatre coins de rayon de l'élément d'application.

Cover & Ombres

• .ui-widget-overlay : pour couvrir 100% de la largeur de l' écran et la hauteur de l'application, et définir la couleur de fond / texture et l' opacité de l'écran.
• .ui-widget-shadow : Classe de la couverture de l' application, réglez l'opacité, le décalage / Offset gauche et Shadow "épaisseur". L'épaisseur est de tous les côtés dans le jeu de l'ombre des marges (padding) ont été appliquées. Décalage en fixant la marge (marge) et la marge de gauche (marge) ont été appliqués (peut être positif, il peut être négatif).