Forum | Gli ultimi tutorial di sviluppo web
 

jQuery Mobile Attributi di dati


jQuery dati Attributi

jQuery Mobile utilizza l' HTML5 data-* attributo per creare un "touch-friendly" aspetto e attraente per i dispositivi mobili.

Per l'elenco di riferimento di seguito, bold value indica il valore di default.


Pulsante

Obsolete nella versione 1.4. Utilizzare classi CSS invece. I collegamenti ipertestuali con data-role="button" . Elementi Button e collegamenti a barre degli strumenti e campi di input sono automaticamente in stile come pulsanti, senza bisogno di data-role="button" .

Data-attributo Valore Descrizione
data-corners true | false Specifica se il pulsante deve avere gli angoli arrotondati o no
data-icon Icons Reference Specifica l'icona del pulsante. Il valore predefinito è nessuna icona
data-iconpos left | right | top | bottom | notext Specifica la posizione dell'icona
data-iconshadow true | false Specifica se l'icona del pulsante deve avere ombre o no
data-inlinetrue | false Specifica se il pulsante dovrebbe essere in linea o no
data-minitrue | false Specifica se il pulsante dovrebbe essere di dimensioni piccole o regolare
data-shadow true | false Specifica se il pulsante deve avere ombre o no
data-theme letter (a-z) Specifica il colore del tema del pulsante

Per raggruppare più pulsanti, utilizzare un contenitore con il data-role="controlgroup" attributo insieme con data-type="horizontal|vertical" per specificare se i pulsanti di gruppo orizzontalmente o verticalmente.


casella di controllo

Coppie di etichette e ingressi con type="checkbox" .

Data-attributo Valore Descrizione
data-minitrue | false Specifica se la casella di controllo dovrebbe essere di dimensioni piccole o regolare
data-rolenone Impedisce jQuery Mobile per caselle di stile come pulsanti
data-theme letter (a-z) Specifica il colore del tema della casella di controllo

Per raggruppare più caselle di controllo, utilizzare il data-role="controlgroup" insieme alla data-type="horizontal|vertical" per specificare se gruppo checkboxes orizzontalmente o verticalmente.


Collassabile

Un elemento di intestazione seguita da qualunque markup HTML all'interno di un contenitore con il data-role="collapsible" .

Data-attributo Valore Descrizione
data-collapsed true | false Specifica se il contenuto deve essere chiusa o espansa
data-collapsed-cue-text sometext  Specifica un testo per fornire un feedback udibile per gli utenti con il software di lettura dello schermo. L'impostazione predefinita è "Clicca qui per ridurre il contenuto".
data-collapsed-icon Icons Reference Specifica l'icona del pulsante di pieghevole. L'impostazione predefinita è "più"
data-content-theme letter (a-z) Specifica il colore del tema del contenuto pieghevole. Sarà anche aggiungere gli angoli arrotondati al contenuto pieghevole
data-expanded-cue-text sometext  Specifica un testo per fornire un feedback udibile per gli utenti con il software di lettura dello schermo. L'impostazione predefinita è "fare clic per espandere i contenuti".
data-expanded-icon Icons Reference Specifica l'icona del pulsante di pieghevole quando il contenuto è espanso. L'impostazione predefinita è "minus"
data-iconpos left | right | top | bottom Specifica la posizione dell'icona
data-inset true | false Specifica se il pulsante di pieghevole dovrebbe essere in stile con gli angoli arrotondati e un certo margine o no
data-minitrue | false Specifica se i pulsanti pieghevoli devono essere di dimensioni piccole o regolare
data-theme letter (a-z) Specifica il colore del tema del pulsante di pieghevole

Set pieghevole

Blocchi contenuti pieghevoli all'interno di un contenitore con il data-role="collapsibleset" .

Data-attributo Valore Descrizione
data-collapsed-icon Icons Reference Specifica l'icona del pulsante di pieghevole. L'impostazione predefinita è "più"
data-content-theme letter (a-z) Specifica il colore del tema del contenuto pieghevole
data-expanded-icon Icons Reference Specifica l'icona del pulsante di pieghevole quando il contenuto è espanso. L'impostazione predefinita è "meno"
data-iconpos left | right | top | bottom | notext Specifica la posizione dell'icona
data-inset true | false Specifica se i collapsibles devono essere in stile con gli angoli arrotondati e un certo margine o no
data-minitrue | false Specifica se i pulsanti pieghevoli devono essere di dimensioni piccole o regolare
data-theme letter (a-z) Specifica il colore del tema del set pieghevole

contenuto

Obsolete nella versione 1.4, e saranno rimossi in 1.5. Contenitore con data-role="content" .

Data-attributo Valore Descrizione
data-theme letter (a-z) Specifica il colore del tema del contenuto

Gruppo di controllo

Un <div> o <fieldset> contenitore con data-role="controlgroup" . Gruppi più ingressi dei pulsanti in stile di un solo tipo (pulsanti di collegamento-based, pulsanti di opzione, caselle di controllo, selezionare elementi). Per raggruppare le caselle di controllo di forma e pulsanti di opzione, il <fieldset> contenitore è raccomandato all'interno di un <div> con il "ui-fieldcontain" di classe, per migliorare l'etichetta styling.

Data-attributo Valore Descrizione
data-exclude-invisible true | false Specifica se escludere o meno bambini invisibili nell'assegnazione degli angoli arrotondati
data-minitrue | false Specifica se il gruppo dovrebbe essere di dimensioni piccole o regolare
data-theme letter (a-z) Specifica il colore del tema del controllo alimentati
data-typehorizontal | vertical Specifica se il gruppo deve essere visualizzato orizzontalmente o verticalmente

Dialogo

Un contenitore con data-dialog="true" .

Data-attributo Valore Descrizione
data-close-btn left | right | none Specifica la posizione del pulsante di chiusura
data-close-btn-text sometext Specifica il testo per il pulsante di chiusura
data-corners true | false  Specifica se la finestra deve avere gli angoli arrotondati o no
data-dom-cachetrue | false Specifica se la svuotare la cache jQuery DOM o meno per le singole pagine (se impostato su true, è necessario fare attenzione a gestire il DOM te stesso e prova a fondo su tutti i dispositivi mobili)
data-overlay-theme letter (a-z) Specifica il colore di sovrapposizione (sfondo) della pagina di dialogo
data-theme letter (a-z) Specifica il colore del tema della pagina di dialogo
data-title sometext Specifica il titolo per la pagina di dialogo

Aumento

Un contenitore con data-enhance="false" o data-ajax="false"

Data-attributo Valore Descrizione
data-enhance true | false Se è impostato su "true" , (default) jQuery Mobile lo stile automaticamente la pagina, che lo rende adatto per i dispositivi mobili. Se impostato su "false", il quadro non sarà lo stile della pagina
data-ajax true | false Specifica se caricare le pagine tramite la tecnologia AJAX o no

Nota: data-enhance="false" deve essere utilizzato in combinazione con $.mobile.ignoreContentEnabled=true" per fermare jQuery Mobile per fogli di stile automaticamente.

Qualsiasi elemento di collegamento o di forma all'interno data-ajax="false" contenitori verrà ignorato dalla funzionalità di navigazione del quadro quando $.mobile.ignoreContentEnabled è impostata su true.


campo Contenitore

Obsolete nella versione 1.4, e saranno rimossi in 1.5. Usa class="ui-fieldcontain instead" . Un contenitore con data-role="fieldcontain" avvolto intorno paio elemento etichetta / form.


barra degli strumenti fissa

Un contenitore con data-role="header" o data-role="footer" insieme con la data-position="fixed" attributo.

Data-attributo Valore Descrizione
data-disable-page-zoom true | false Specifica se l'utente è in grado di scalare / zoom della pagina oppure no
data-fullscreentrue | false Specifica barre degli strumenti per essere sempre posizionati nella parte superiore e / o inferiore
data-tap-toggle true | false Specifica se l'utente è in grado di attivare o disattivare la barra degli strumenti, la visibilità sul rubinetti / clic o non
data-transition slide | fade | none Specifica l'effetto di transizione quando si verifica un rubinetto / click
data-update-page-padding true | false Specifica l'imbottitura sia della parte superiore e inferiore della pagina per essere aggiornato sul ridimensionamento, di transizione e "updatelayout" eventi (jQuery Mobile aggiorna sempre l'imbottitura sul "pageshow" evento)
data-visible-on-page-show true | false Specifica barra degli strumenti di visibilità quando viene visualizzata pagina padre

Flip Toggle Switch

Un <input type="checkbox"> con un data-ruolo "flipswitch" :

Data-attributo Valore Descrizione
data-minitrue | false Specifica se l'interruttore deve essere di dimensioni piccole o regolare
data-on-text sometext Specifica il "su" testo sul l'interruttore FLIP (di default è "On" )
data-off-text sometext Specifica il testo "OFF" l'interruttore della medaglia (di default è "Off" )

footer

Un contenitore con data-role="footer" .

Data-attributo Valore Descrizione
data-id sometext Specifica un ID univoco. Richiesto per piè di pagina persistenti
data-position inline | fixed Specifica se il piè di pagina dovrebbe essere in linea con il contenuto della pagina o rimane posizionato in fondo
data-fullscreentrue | false Specifica se il piè deve sempre essere posizionata in basso e sopra il contenuto della pagina (leggermente trasparente) o meno
data-theme letter (a-z) Specifica il colore del tema del piè di pagina

Nota: Per abilitare la posizione a schermo intero, l'uso data-position="fixed" e quindi aggiungere il data-fullscreen attributo per l'elemento.


Intestazione

Un contenitore con data-role="header" .

Data-attributo Valore Descrizione
data-id sometext Specifica un ID univoco. Richiesto per le intestazioni persistenti
data-position inline | fixed Specifica se l'intestazione deve essere in linea con il contenuto della pagina o rimanere posizionata in alto
data-fullscreentrue | false Specifica se l'intestazione deve sempre essere posizionato in alto e sopra il contenuto della pagina (leggermente trasparente) o meno
data-theme letter (a-z) Specifica il colore del tema della testata

Nota: Per abilitare la posizione a schermo intero, l'uso data-position="fixed" e quindi aggiungere il data-fullscreen attributo per l'elemento.


ingressi

Ingressi con type="text|search|etc." O textarea elements .

Data-attributo Valore Descrizione
data-clear-btntrue | false Specifica se l'input deve avere una "clear" pulsante
data-clear-btn-text text Specifica un testo per il pulsante "clear". L'impostazione predefinita è "clear text"
data-minitrue | false Specifica se l'ingresso dovrebbe essere di dimensioni piccole o regolare
data-rolenone Impedisce jQuery Mobile per lo stile ingressi / textarea come pulsanti
data-theme letter (a-z)  Specifica il colore del tema del campo di input

collegamento

Tutti i link.

Data-attributo Valore Descrizione
data-ajax true | false Specifica se caricare le pagine tramite la tecnologia AJAX per una migliore esperienza utente e le transizioni. Se impostato su false, jQuery Mobile farà una richiesta di pagina normale.
data-directionreverse animazione della transizione inversa (solo per la pagina o una finestra)
data-dom-cachetrue | false Specifica se la svuotare la cache jQuery DOM o meno per le singole pagine (se impostato su true, è necessario fare attenzione a gestire il DOM te stesso e prova a fondo su tutti i dispositivi mobili)
data-prefetchtrue | false Specifica se Prefetch pagine nel DOM in modo che siano disponibili quando l'utente li visita
data-relback | dialog | external | popup Specifica un'opzione per il modo in cui il collegamento dovrebbe comportarsi. Indietro - Si sposta un passo indietro nella storia. Dialog - Apre un collegamento come una finestra, non rintracciato nella storia. Esterno - per il collegamento a un altro dominio. Popup - apre una finestra di popup.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Specifica come passaggio da una pagina all'altra. Vedere il nostro jQuery Mobile Transizioni capitolo.
data-position-to origin | jQuery selector | window Specifica la posizione delle scatole di pop-up. Origin - Default. Posiziona il pop-up sopra il link che apre. selettore jQuery - posiziona il popup sopra l'elemento specificato. Finestra - posiziona il popup al centro dello schermo finestra.

Lista

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

Data-attributo Valore Descrizione
data-autodividerstrue | false Specifica se dividere automaticamente voci di elenco o no
data-count-theme letter (a-z) Specifica il colore del tema della bolla conteggio
data-divider-theme letter (a-z) Specifica il colore del tema della lista divisorio
data-filtertrue | false Specifica se aggiungere una casella di ricerca in un elenco o no
data-filter-placeholder sometext Obsolete nella versione 1.4. Utilizzare l'attributo segnaposto HTML invece. Specifica il testo all'interno della casella di ricerca. Il default è "elementi di filtro ..."
data-filter-theme letter (a-z) Specifica il colore del tema del filtro di ricerca
data-icon Icons Reference Specifica l'icona della lista
data-insettrue | false Specifica se l'elenco dovrebbe essere in stile con gli angoli arrotondati e un certo margine o no
data-split-icon Icons Reference Specifica l'icona del pulsante di divisione. L'impostazione predefinita è "freccia-R"
data-split-theme letter (a-z) Specifica il colore tema del pulsante SPLIT
data-theme letter (a-z) Specifica il colore del tema della lista

elemento della lista

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

Data-attributo Valore Descrizione
data-filtertext sometext Specifica un testo da ricercare durante il filtraggio elementi. Il testo sarà poi filtrato invece del testo vero e proprio elemento della lista
data-icon Icons Reference Specifica l'icona della voce di elenco
data-rolelist-divider Specifica un divisore per voci di elenco
data-theme letter (a-z)  Specifica il colore del tema della voce di elenco

Nota: I-icona di dati attributo unico lavoro su voci di elenco con i link.


Navbar

<li> elementi all'interno di un contenitore con data-role="navbar" .

Data-attributo Valore Descrizione
data-icon Icons Reference Specifica l'icona della voce di elenco
data-iconposleft | right | top | bottom | notext Specifica la posizione dell'icona

Navbars ereditano il tema-campione dal loro contenitore principale. Non è possibile impostare l'attributo data-tema a una barra di navigazione. L'attributo data-tema può essere impostata singolarmente per ogni link all'interno della barra di navigazione.


Pagina

Un contenitore con data-role="page" .

Data-attributo Valore Descrizione
data-dom-cachetrue | false Specifica se la svuotare la cache jQuery DOM o meno per le singole pagine (se impostato su true, è necessario fare attenzione a gestire il DOM te stesso e prova a fondo su tutti i dispositivi mobili)
data-overlay-theme letter (a-z)  Specifica il colore di sovrapposizione (sfondo) di pagine di dialogo
data-theme letter (a-z)  Specifica il colore del tema della pagina
data-title sometext Specifica il titolo della pagina
data-urlurl Valore per l'aggiornamento del URL, invece che l'URL utilizzato per richiedere la pagina

Apparire

Un contenitore con data-role="popup" .

Data-attributo Valore Descrizione
data-corners true | false Specifica se il popup deve avere gli angoli arrotondati o no
data-dismissible true | false Specifica se il popup deve essere chiusa facendo clic all'esterno del popup o no
data-history true | false Specifica se il popup deve creare un elemento di cronologia del browser una volta aperto. Se impostato su false, non creerà un elemento della cronologia, per poi non essere richiudibile tramite il tasto "Back" del browser
data-overlay-theme letter (a-z)  Specifica il colore di sovrapposizione (sfondo) della scatola pop-up. Di default è sfondo trasparente (nessuno).
data-shadow true | false Specifica se la casella popup deve avere ombre o no
data-theme letter (a-z)  Specifica il colore del tema della finestra di popup. Predefinito ereditato, "none" imposta il popup per trasparente
data-tolerance30, 15, 30, 15 Specifica la distanza dai bordi della finestra ( top, right, bottom, left )

Un'ancora con data-rel="popup" :

Data-attributo Valore Descrizione
data-position-to origin | jQuery selector | window Specifica la posizione delle scatole di pop-up. Origin - Default. Posiziona il pop-up sopra il link che apre. selettore jQuery - posiziona il popup sopra l'elemento specificato. Finestra - posiziona il popup al centro dello schermo finestra.
data-relpopup Per aprire la finestra di popup
data-transitionfade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Specifica come passaggio da una pagina all'altra. Vedere il nostro jQuery Mobile Transizioni capitolo.

Radio Button

Coppie di etichette e ingressi con type="radio" .

Data-attributo Valore Descrizione
data-minitrue | false Specifica se il pulsante dovrebbe essere di dimensioni piccole o regolare
data-rolenone Impedisce jQuery Mobile per lo stile radiobuttons come pulsanti migliorate
data-theme letter (a-z) Specifica il colore tema del pulsante di scelta

Per di più pulsanti di opzione del gruppo, utilizzare il data-role="controlgroup" insieme con il data-type="horizontal|vertical" per specificare se raggruppare i pulsanti orizzontalmente o verticalmente.


Selezionare

Tutto <select> elementi.

Data-attributo Valore Descrizione
data-icon Icons Reference Specifica l'icona dell'elemento di selezione. L'impostazione predefinita è "arrow-d"
data-iconposleft | right | top | bottom | notext Specifica la posizione dell'icona
data-inlinetrue | false Specifica se l'elemento di selezione deve essere in linea o no
data-minitrue | false Specifica se il prescelto dovrebbe essere di dimensioni piccole o regolare
data-native-menu true | false Quando è impostato su false, utilizza menu di selezione proprio personalizzato di jQuery (consigliato se si desidera che il menu di selezione per visualizzare lo stesso su tutti i dispositivi mobili)
data-overlay-theme letter (a-z) Specifica il colore tema del menu di selezione proprio personalizzato di jQuery (utilizzato in combinazione con data-native-menu="false" )
data-placeholdertrue | false Può essere impostato su un <option> elemento di un selezionato non-native
data-rolenone Impedisce jQuery Mobile per lo stile elementi di selezione come pulsanti
data-theme letter (a-z) Specifica il colore del tema dell'elemento di selezione

Per gruppo multiplo selezionare gli elementi, utilizzare il data-role="controlgroup" insieme alla data-type="horizontal|vertical" per specificare se raggruppare gli elementi orizzontalmente o verticalmente.


Slider

Ingressi con type="range" .

Data-attributo Valore Descrizione
data-highlighttrue | false Specifica se la pista di scorrimento dovrebbe essere evidenziata o no
data-minitrue | false Specifica se il cursore deve essere di dimensioni piccole o regolare
data-rolenone Impedisce jQuery Mobile per dispositivi di scorrimento in stile come pulsanti
data-theme letter (a-z) Specifica il colore del tema del controllo cursore (l'ingresso, gestire e tenere traccia)
data-track-theme letter (a-z) Specifica il colore del tema della pista di scorrimento