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-inline | true | false | Specifica se il pulsante dovrebbe essere in linea o no |
| data-mini | true | 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-mini | true | false | Specifica se la casella di controllo dovrebbe essere di dimensioni piccole o regolare |
| data-role | none | 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-mini | true | 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-mini | true | 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-mini | true | 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-type | horizontal | 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-cache | true | 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-fullscreen | true | 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-mini | true | 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-fullscreen | true | 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-fullscreen | true | 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-btn | true | 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-mini | true | false | Specifica se l'ingresso dovrebbe essere di dimensioni piccole o regolare |
| data-role | none | 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-direction | reverse | animazione della transizione inversa (solo per la pagina o una finestra) |
| data-dom-cache | true | 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-prefetch | true | false | Specifica se Prefetch pagine nel DOM in modo che siano disponibili quando l'utente li visita |
| data-rel | back | 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-autodividers | true | 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-filter | true | 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-inset | true | 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-role | list-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-iconpos | left | 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-cache | true | 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-url | url | 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-tolerance | 30, 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-rel | popup | Per aprire la 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. |
Radio Button
Coppie di etichette e ingressi con type="radio" .
| Data-attributo | Valore | Descrizione |
|---|---|---|
| data-mini | true | false | Specifica se il pulsante dovrebbe essere di dimensioni piccole o regolare |
| data-role | none | 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-iconpos | left | right | top | bottom | notext | Specifica la posizione dell'icona |
| data-inline | true | false | Specifica se l'elemento di selezione deve essere in linea o no |
| data-mini | true | 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-placeholder | true | false | Può essere impostato su un <option> elemento di un selezionato non-native |
| data-role | none | 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-highlight | true | false | Specifica se la pista di scorrimento dovrebbe essere evidenziata o no |
| data-mini | true | false | Specifica se il cursore deve essere di dimensioni piccole o regolare |
| data-role | none | 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 |