jQuery UI CSS API quadro

framework jQuery UI CSS

jQuery UI include un framework CSS potente, al fine di creare widget jQuery personalizzati e design. Telaio contiene le classi comuni dell'interfaccia utente necessari, e può essere utilizzato jQuery UI ThemeRoller manutenzione. Creando i propri componenti dell'interfaccia utente utilizzando il framework jQuery UI CSS. È necessario utilizzare convenzione Sharemark, al fine di collegare l'integrazione comunitaria codice.

classi del framework

Sono i seguenti stili di classe CSS, sono stabiliti in base alla strutturato, o se si tratta di themable (colori, font, sfondi, ecc), sono definiti in ui.core.css e ui.theme.css due file. Queste classi sono state progettate per gli elementi dell'interfaccia utente, al fine di garantire la coerenza visiva in tutta l'applicazione, da jQuery UI ThemeRoller di componenti tematizzazione.

Helper layout

• .ui-helper-hidden : gli elementi della domanda display: none .
• .ui-helper-hidden-accessible : gli elementi della domanda per accedere al nascosto (posizionamento assoluto per pagina).
• .ui-helper-reset : Gli elementi di base stile dell'interfaccia utente azzerati. Ripristinare elementi quali: padding , margin , text-decoration , in stile List, e così via.
• .ui-helper-clearfix : applicazione delle proprietà di confezionamento galleggiante elemento padre.
• .ui-helper-zfix : per <iframe> elemento applicare iframe "fix" CSS.

contenitore widget

• .ui-widget : Class sulla parte esterna del contenitore di applicare tutti i widget. applicazione Widget per la dimensione del carattere e il carattere, ma anche sullo stesso tipo di carattere dagli elementi modulo di domanda e 1em dimensione del font per far fronte successione browser di Windows.
• .ui-widget-header : titolo dell'applicazione contenitore classe. Del elemento e il testo dei suoi figli, i collegamenti, le icone si applicano voce contenitore stile.
• .ui-widget-content : contenuti classe di applicazioni contenitore. Del elemento e il testo dei suoi figli, i collegamenti, le icone contenuto applicazione contenitore stile. (Può essere applicato al titolo elemento padre o fratelli)

stato Interactive

• .ui-state-default : Fare clic sul pulsante di elemento può essere applicato classe. Del elemento e il testo dei suoi figli, i collegamenti, le icone applicazione contenitore in stile "cliccabile default".
• .ui-state-hover : Mouse sospesa se applicato in un elemento pulsante cliccabile quando in classe. Del elemento e il testo dei suoi figli, i collegamenti, le icone applicazione "cliccabile hover" stile contenitore.
• .ui-state-focus : Classe applicazione quando il focus della tastiera in un elemento pulsante cliccabile. Del elemento e il testo dei suoi figli, i collegamenti, le icone applicazione "cliccabile hover" stile contenitore.
• .ui-state-active : Classe applicazione quando un clic del mouse può cliccare sull'elemento tasto. Del elemento e il testo dei suoi figli, i collegamenti, le icone applicazione "cliccabile attivo" stile contenitore.

Cues prompt interattivo

• .ui-state-highlight : per evidenziare o selezionare le applicazioni elemento di classe. Del elemento e il testo dei suoi figli, i collegamenti, le icone applicazione "evidenziare" stile contenitore.
• .ui-state-error : Errore di applicazioni elemento messaggio contenitore di Classe. Del elemento e il testo dei suoi figli, i collegamenti, le icone applicazione "errore" stile contenitore.
• .ui-state-error-text : non solo contro il colore della errore di applicazione Classe testo di sfondo. Può essere utilizzato per formare etichette per essere sub-colore icona dell'applicazione errore.
• .ui-state-disabled : per disattivare elementi dell'interfaccia utente si applicano un'opacità dim. Ciò significa che gli elementi di uno stile già definito per aggiungere più stile.
• .ui-priority-primary : Classe di prime applicazioni pulsante priorità. L'applicazione del testo in grassetto.
• .ui-priority-secondary : Classe di seconde applicazioni pulsante priorità. L'applicazione di elementi di testo di peso normale applicare leggera trasparenza.

icona

Stato e l'immagine

• .ui-icon : Classe di base dell'elemento icona dell'applicazione. Impostare la dimensione di 16px piazze, nascosto all'interno del testo dello sprite stato "contenuto" impostare l'immagine di sfondo. Nota: .ui-icon , classe otterrà un diverso sprite immagine di sfondo sulla base di contenitore principale. Ad esempio, ui-state-default contenitore ui-icon elemento secondo ui-state-default colorazione icona di colore.

icona Tipo

In una dichiarazione .ui-icon dopo la lezione, quindi è possibile dichiarare una seconda velocità del tipo di icona di classe. In circostanze normali, la classe icona segue la sintassi .ui-icon-{icon type}-{icon sub description}-{direction} .

Ad esempio, l'icona di un triangolo che punta verso destra, come segue: .ui-icon-triangle-1-e

di jQuery UI ThemeRoller nella sua colonna di anteprima fornisce una gamma completa di icona quadro CSS. Passa il mouse sopra l'icona per visualizzare il nome della classe.

altre immagini

raggio assistant

• .ui-corner-tl : in alto a sinistra del raggio dell'elemento applicazione.
• .ui-corner-tr : in alto a destra del raggio dell'elemento applicazione.
• .ui-corner-bl : in basso a sinistra del raggio dell'elemento applicazione.
• .ui-corner-br : in basso a destra del raggio dell'elemento applicazione.
• .ui-corner-top : in alto a sinistra del raggio dell'elemento applicazione.
• .ui-corner-bottom : gli elementi in basso a sinistra del raggio di applicazione.
• .ui-corner-right : elementi diagonali della destra superiore e inferiore del raggio applicazione.
• .ui-corner-left : elementi diagonali sinistra superiore e inferiore del raggio applicazione.
• .ui-corner-all : tutti i quattro angoli di raggio applicazione dell'elemento.

Copertura & Shadows

• .ui-widget-overlay : per coprire il 100% della larghezza dello schermo e l'altezza della domanda, e impostare il colore di sfondo / texture e l'opacità dello schermo.
• .ui-widget-shadow : Classe di copertura di applicazione, impostare l'opacità, l'offset / Sinistra Offset, e Ombra "di spessore". Lo spessore è da tutte le parti a margine insieme ombra (imbottitura) sono stati applicati. Offset impostando il margine (margine) e il margine sinistro (margine) sono stati applicati (può essere positivo, può essere negativo).