Attributi Data jQuery Mobile

Attributi jQuery Data

jQuery Mobile utilizza gli attributi HTML5 data-* per creare un aspetto "amichevole al tocco" e bello per i dispositivi mobili.

Nella lista di riferimento sottostante, i valori in grassetto rappresentano i valori di default.

Button

Hyperlink con attributo data-role="button". Gli elementi pulsante e i link nella barra degli strumenti e i campi di input saranno automaticamente impostati con lo stile pulsante, senza bisogno di data-role="button".

Attributi Data Valore Descrizione
data-corners true | false Determinare se i pulsanti hanno o meno i bordi arrotondati.
data-icon Riferimento alle Icone Determinare l'icona del pulsante. Di default non c'è icona.
data-iconpos sinistra | destra | alto | basso | notext Stabilisce la posizione dell'icona.
data-iconshadow true | false Determinare se l'icona del pulsante ha o meno l'ombreggiatura.
data-inline true | false Determinare se i pulsanti sono inline.
data-mini true | false Determinare se i pulsanti sono di dimensioni piccole o normali.
data-shadow true | false Determinare se i pulsanti hanno o meno l'ombreggiatura.
data-theme lettera (a-z) Determinare il colore del tema dei pulsanti.

Suggerimento:Se si desidera combinare più pulsanti, utilizzare un contenitore con attributi data-role="controlgroup" e data-type="horizontal|vertical" per determinare se combinare i pulsanti in orizzontale o verticale.

Checkbox

Il label e l'input con type="checkbox" sono in coppia. Vengono impostati automaticamente con lo stile di pulsante, senza necessità di data-role.

Attributi Data Valore Descrizione
data-mini true | false Definire se le caselle di controllo sono di dimensioni piccole o standard.
data-role nessuno Prevenire che jQuery Mobile imposti lo stile di pulsante alle caselle di controllo.
data-theme lettera (a-z) Definire il colore del tema delle caselle di controllo.

Suggerimento:Per combinare più caselle di controllo, utilizzare data-role="controlgroup" e data-type="orizzontale|verticale" per definire se combinare le caselle di controllo in orizzontale o verticale.

Collapsible

Elemento di titolo, seguito da qualsiasi markup HTML all'interno del contenitore con attributo data-role="collapsible".

Attributi Data Valore Descrizione
data-collapsed true | false Definire se il contenuto dovrebbe essere chiuso o aperto.
data-collapsed-icon Riferimento alle Icone Definire l'icona del pulsante pieghevole. Predefinito è "più".
data-content-theme lettera (a-z) Definire il colore del tema del contenuto pieghevole. Inoltre, aggiungere arrotondamenti al contenuto pieghevole.
data-expanded-icon Riferimento alle Icone Definire l'icona del pulsante pieghevole quando il contenuto è espanso. Predefinito è "trattino".
data-iconpos sinistra | destra | alto | basso Stabilisce la posizione dell'icona.
data-inset true | false Definire se i pulsanti pieghevoli hanno uno stile di arrotondamento e margine. Valori: sinistra | destra | alto | basso
data-mini true | false Definire se i pulsanti pieghevoli sono di dimensioni piccole o standard.
data-theme lettera (a-z) Definire il colore del tema del pulsante pieghevole.

Collapsible Set

Contenuto pieghevole all'interno del contenitore con attributo data-role="collapsible-set".

Attributi Data Valore Descrizione
data-collapsed-icon Riferimento alle Icone Definire l'icona del pulsante pieghevole. Predefinito è "più".
data-content-theme lettera (a-z) Definire il colore del tema del contenuto pieghevole.
data-expanded-icon Riferimento alle Icone Definire l'icona del pulsante pieghevole quando il contenuto è espanso. Predefinito è "trattino".
data-iconpos sinistra | destra | alto | basso | notext Stabilisce la posizione dell'icona.
data-inset true | false Definire se i collapsibles hanno uno stile di arrotondamento e margine.
data-mini true | false Definire se i pulsanti pieghevoli sono di dimensioni piccole o standard.
data-theme lettera (a-z) Definire il colore del tema della raccolta pieghevole.

Contenuto

Contenitore con attributo data-role="content".

Attributi Data Valore Descrizione
data-theme lettera (a-z) Definire il colore del tema del contenuto. Predefinito è "c".

Controlgroup

Contenitore <div> o <fieldset> con attributo data-role="controlgroup". Combinare più input di tipo singolo con stili di pulsante (pulsanti basati su link, pulsanti di selezione, caselle di controllo, menu di selezione).

Attributi Data Valore Descrizione
data-mini true | false Definire se la combinazione è di dimensioni piccole o standard.
data-type orizzontale | verticale Definire se combinare in orizzontale o verticale.

Dialogo

Contenitore o link con attributo data-role="dialog" o data-rel="dialog".

Attributi Data Valore Descrizione
data-close-btn-text sometext Regola il testo del pulsante di chiusura del dialogo.
data-dom-cache true | false Regola se cancellare il cache jQuery DOM per la pagina individuale (se impostato su true, è necessario prestare attenzione alla gestione del DOM e testare completamente tutti i dispositivi mobili).
data-overlay-theme lettera (a-z) Specificare il colore di sovrapposizione (sfondo) della pagina di dialogo.
data-theme lettera (a-z) Regola il colore tematico della pagina di dialogo.
data-title sometext Regola il titolo della pagina di dialogo.

Enhancement

Contenitore con attributo data-enhance="false" o data-ajax="false".

Attributi Data Valore Descrizione
data-enhance true | false Se impostato su "true" (predefinito), jQuery Mobile aggiunge automaticamente stili alla pagina per renderla più adatta ai dispositivi mobili. Se impostato su "false", il framework non setta stili di pagina.
data-ajax true | false Regola se il caricamento della pagina avviene tramite AJAX.

Nota:data-enhance="false", ad esempio combinato con $.mobile.ignoreContentEnabled=true per impedire che jQuery Mobile aggiunga automaticamente stili di pagina.

Quando $.mobile.ignoreContentEnabled è impostato su true, i link o gli elementi di modulo con data-ajax="false" nel contenitore vengono ignorati dalla funzione di navigazione del framework.

Fieldcontainer

Contenitore per l'elemento data-role="fieldcontain" di label/form.

Barra degli strumenti fissa

Contenitore con attributo data-role="header" o data-role="footer" e attributo data-position="fixed".

Attributi Data Valore Descrizione
data-disable-page-zoom true | false Regola se l'utente può zoomare la pagina.
data-fullscreen true | false Regola se la barra degli strumenti deve essere sempre in alto e/o in basso.
data-tap-toggle true | false Regola se l'utente può alternare la visibilità della barra degli strumenti tramite click/tap.
data-transition slide | fade | none Regola l'effetto di transizione quando si verifica un'azione di click/tap.
data-update-page-padding true | false Regola l'aggiornamento del padding superiore, inferiore e laterale della pagina quando si verificano eventi resize, transition e "updatelayout" (jQuery Mobile aggiorna sempre il padding quando si verifica l'evento "pageshow").
data-visible-on-page-show true | false Regola la visibilità della barra degli strumenti quando viene visualizzata la pagina principale.

Switch a scorrimento a ribalta

Un elemento <select> con attributo data-role="slider" e due elementi <option>.

Attributi Data Valore Descrizione
data-mini true | false Definisce se lo switch è di dimensioni piccole o standard.
data-role nessuno Impedisce a jQuery Mobile di impostare il selettore di scambio come stile di pulsante.
data-theme lettera (a-z) Definisce il colore del tema del selettore di scambio.
data-track-theme lettera (a-z) Definisce il colore del tema della traccia.

Piede di pagina

Contenitore con attributo data-role="footer".

Attributi Data Valore Descrizione
data-id sometext Definisce un ID unico. È necessario per i piedi di pagina persistenti.
data-position in linea | fisso Definisce se il piede di pagina è in linea con il contenuto della pagina o rimane in basso.
data-fullscreen true | false Definisce se il piede di pagina rimane sempre in basso e copre il contenuto della pagina (parzialmente trasparente).
data-theme lettera (a-z) Definisce il colore del tema del piede di pagina. Predefinito è "a".

Nota:Per abilitare la posizionamento a schermo intero, utilizzare data-position="fisso" e aggiungere l'attributo data-fullscreen all'elemento.

Intestazione

Contenitore con data-role="header".

Attributi Data Valore Descrizione
data-id sometext Definisce un ID unico. È necessario per gli intestazioni persistenti.
data-position in linea | fisso Definisce se l'intestazione di pagina è in linea con il contenuto della pagina o rimane in alto.
data-fullscreen true | false Definisce se la pagina rimane sempre in alto e copre il contenuto della pagina (parzialmente trasparente).
data-theme lettera (a-z) Definisce il colore del tema dell'intestazione di pagina. Predefinito è "a".

Nota:Per abilitare la posizionamento a schermo intero, utilizzare data-position="fisso" e aggiungere l'attributo data-fullscreen all'elemento.

Collegamento

Tutti i collegamenti, inclusi quelli con data-role="button" e i pulsanti di invio dei moduli.

Attributi Data Valore Descrizione
data-ajax true | false Definisce se la pagina viene caricata tramite AJAX per migliorare l'esperienza utente e la transizione. Se impostato su false, jQuery Mobile esegue una richiesta di pagina normale.
data-direction inverso Inverte l'animazione di transizione (solo per le pagine o i dialoghi)
data-dom-cache true | false Specificare se cancellare la cache DOM jQuery di una pagina individuale (se impostato su true, dovrai prestare attenzione alla gestione del DOM e testare completamente tutti i dispositivi mobili).
data-prefetch true | false Definisce se la pagina viene pre-caricata nel DOM per essere disponibile durante l'accesso dell'utente.
data-rel indietro | dialogo | esterno | popup Definisce le opzioni relative al comportamento dei collegamenti. Indietro - Si sposta indietro di un passo nella cronologia. Dialogo - Apre la pagina come un dialogo, non registrato nella cronologia. Esterno - Collegamento a un altro dominio. Apre - Apre una finestra popup.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Specificare come passare da una pagina a un'altra. Vedere jQuery Mobile transizioni.
data-position-to origin | jQuery selector | window Specificare la posizione della finestra emergente. Origine - Predefinito. Si apre il collegamento in un popup. Selettore jQuery - Compare sull'elemento specificato. Finestra - Compare al centro dello schermo della finestra.

List

Elemento <ol> o <ul> con attributo data-role="listview".

Attributi Data Valore Descrizione
data-autodividers true | false Determina se automaticamente dividere gli elementi dell'elenco.
data-count-theme lettera (a-z) Determina il colore tematico della schiuma di conteggio. Predefinito è "c".
data-divider-theme lettera (a-z) Determina il colore tematico del divisore dell'elenco. Predefinito è "b".
data-filter true | false Determina se aggiungere una casella di ricerca nell'elenco.
data-filter-placeholder sometext Determina il testo nella casella di ricerca. Predefinito è "Filter items...".
data-filter-theme lettera (a-z) Determina il colore tematico del programma di filtraggio della ricerca. Predefinito è "c".
data-icon Riferimento alle Icone Determina l'icona dell'elenco.
data-inset true | false Determina se aggiungere stili di bordo arrotondato e margine esterno all'elenco.
data-split-icon Riferimento alle Icone Determina l'icona del pulsante di divisione. Predefinito è "arrow-r".
data-split-theme lettera (a-z) Determina il colore tematico del pulsante di divisione. Predefinito è "b".
data-theme lettera (a-z) Determina il colore tematico dell'elenco.

List item

Elemento <li> all'interno di <ol> o <ul> con attributo data-role="listview".

Attributi Data Valore Descrizione
data-filtertext sometext Determina il testo da cercare durante la filtraggio dell'elemento. Questo testo, non il testo effettivo dell'elemento elenco, verrà cercato.
data-icon Riferimento alle Icone Determina l'icona dell'elemento elenco.
data-role list-divider Determina il divisore dell'elemento elenco.
data-theme lettera (a-z) Determina il colore tematico dell'elemento elenco.

Nota:L'attributo data-icon è applicabile solo agli elementi elenco con link.

Navbar

Elemento <li> all'interno del contenitore con attributo data-role="navbar".

Attributi Data Valore Descrizione
data-icon Riferimento alle Icone Determina l'icona dell'elemento elenco.
data-iconpos sinistra | destra | alto | basso | notext Stabilisce la posizione dell'icona.

Suggerimento:La barra di navigazione eredita theme-swatch dal contenitore genitore. Non è possibile impostare l'attributo data-theme sulla barra di navigazione. È possibile impostare l'attributo data-theme su ogni link all'interno della navbar.

Page

Contenitore con attributo data-role="page".

Attributi Data Valore Descrizione
data-add-back-btn true | false Aggiungi automaticamente il pulsante indietro, utilizzato solo nella intestazione della pagina.
data-back-btn-text sometext Determina il testo del pulsante indietro.
data-back-btn-theme lettera (a-z) Determina il colore tematico del pulsante indietro.
data-close-btn-text lettera (a-z) Determina il testo del pulsante di chiusura nella finestra di dialogo.
data-dom-cache true | false Specificare se cancellare la cache DOM jQuery di una pagina individuale (se impostato su true, dovrai prestare attenzione alla gestione del DOM e testare completamente tutti i dispositivi mobili).
data-overlay-theme lettera (a-z) Specificare il colore di sovrapposizione (sfondo) della pagina di dialogo.
data-theme lettera (a-z) Specificare il colore del tema della pagina. Predefinito è "c".
data-title sometext Specificare il titolo della pagina.
data-url url Questo valore viene utilizzato per aggiornare l'URL, non per richiedere una pagina.

Popup

Contenitore con attributo data-role="popup"

Attributi Data Valore Descrizione
data-corners true | false Specificare se la finestra emergente ha angoli arrotondati.
data-overlay-theme lettera (a-z) Specificare il colore di sovrapposizione (sfondo) della finestra emergente. Predefinito è sfondo trasparente (none).
data-shadow true | false Specificare se la finestra emergente ha l'ombreggiatura.
data-theme lettera (a-z) Specificare il colore del tema della finestra emergente. Predefinito è ereditato, "none" impostato su trasparente.
data-tolerance 30, 15, 30, 15 Specificare la distanza dal margine del finestra (top, right, bottom, left).

Ancora con attributo data-rel="popup"

Attributi Data Valore Descrizione
data-position-to origin | jQuery selector | window Specificare la posizione della finestra emergente. Origin - Predefinito. La finestra emergente si trova sul link che la apre. jQuery selector - La finestra emergente si trova sull'elemento specificato. Window - La finestra emergente si trova al centro dello schermo della finestra.
data-rel popup Utilizzato per aprire una finestra emergente.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Specificare come passare da una pagina a un'altra. Vedere jQuery Mobile transizioni.

Pulsante di scelta singola

label associato all'input con type="radio" viene automaticamente impostato come stile pulsante, senza bisogno di data-role.

Attributi Data Valore Descrizione
data-mini true | false Specificare se i pulsanti devono essere di dimensioni piccole o di dimensioni standard.
data-role nessuno Posizionare jQuery Mobile per impostare lo stile dei pulsanti di scelta singola come enhanced buttons.
data-theme lettera (a-z) Specificare il colore del tema dei pulsanti di scelta singola.

Suggerimento:Per combinare più pulsanti di scelta singola, utilizzare data-role="controlgroup" e data-type="horizontal|vertical" per specificare se combinare i pulsanti in orizzontale o in verticale.

Select

Tutti gli elementi <select> . Verrà automaticamente applicato lo stile del pulsante, senza bisogno di date-role.

Attributi Data Valore Descrizione
data-icon Riferimento alle Icone Stabilisce l'icona dell'elemento select. Predefinita è "arrow-d".
data-iconpos sinistra | destra | alto | basso | notext Stabilisce la posizione dell'icona.
data-inline true | false Stabilisce se l'elemento select è inline.
data-mini true | false Stabilisce se l'elemento select è di dimensioni piccole o standard.
data-native-menu true | false Se impostato su false, utilizza il menu di selezione personalizzato di jQuery (se desiderate che il menu di selezione abbia un aspetto coerente su tutti i dispositivi mobili, è consigliabile utilizzarlo).
data-overlay-theme lettera (a-z) Stabilisce il colore tematico del menu di selezione personalizzato di jQuery (utilizzare insieme a data-native-menu="false").
data-placeholder true | false Può essere impostato sugli elementi <option> non nativi.
data-role nessuno Posiziona jQuery Mobile per impostare lo stile dell'elemento select come pulsante.
data-theme lettera (a-z) Stabilisce il colore tematico dell'elemento select.

Suggerimento:Per combinare più elementi select, utilizzare data-role="controlgroup" e data-type="horizontal|vertical" per stabilire se combinare l'elemento in orizzontale o verticale.

Slider

Elemento input con type="range" . Verrà automaticamente applicato lo stile del pulsante, senza bisogno di data-role.

Attributi Data Valore Descrizione
data-highlight true | false Stabilisce se evidenziare la traccia del dispositivo di scorrimento.
data-mini true | false Stabilisce se il dispositivo di scorrimento è di dimensioni piccole o standard.
data-role nessuno Posiziona jQuery Mobile per impostare lo stile del pulsante di impostazione del dispositivo di scorrimento.
data-theme lettera (a-z) Stabilisce il colore tematico del dispositivo di scorrimento (input, handle e traccia).
data-track-theme lettera (a-z) Stabilisce il colore tematico della traccia del dispositivo di scorrimento.

Input di testo e Textarea

Elemento input o textarea con type="text|search|etc." . Verrà automaticamente applicato lo stile, senza bisogno di data-role.

Attributi Data Valore Descrizione
data-mini true | false Stabilisce se l'elemento input è di dimensioni piccole o normali.
data-role nessuno Placa jQuery Mobile che imposta lo stile del pulsante per input/textarea.
data-theme lettera (a-z) Stabilisce il colore del tema del campo di input specificato.