Atributele jQuery de date
jQuery Mobile utilizează HTML5 a datelor * atribut pentru a crea un "touch-friendly" și atractiv aspect pentru dispozitive mobile.
Pentru lista de referință de mai jos, bold value specifică valoarea implicită.
Buton
Depreciată în versiunea 1.4. Utilizați clase CSS în loc. Hyperlinkuri cu data-role="button" . Elemente de taste și link - uri în bare de instrumente și câmpurile de intrare sunt decorate în mod automat ca butoane, nu este nevoie de data-role="button" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-corners | true | false | Specifică dacă butonul ar trebui să aibă colțuri rotunjite sau nu |
| data-icon | Icons Reference | Specifică pictograma butonului. Implicit este nici o pictogramă |
| data-iconpos | left | right | top | bottom | notext | Specifică poziția pictogramei |
| data-iconshadow | true | false | Specifică dacă pictograma butonului ar trebui să aibă umbre sau nu |
| data-inline | true | false | Specifică dacă butonul ar trebui să fie în linie sau nu |
| data-mini | true | false | Specifică dacă butonul ar trebui să fie de dimensiuni mici sau regulate |
| data-shadow | true | false | Specifică dacă butonul ar trebui să aibă umbre sau nu |
| data-theme | letter (a-z) | Specifică culoarea tema a butonului |
Pentru mai multe butoane de grup, utilizați un recipient cu data-role="controlgroup" de data-type="horizontal|vertical" data-role="controlgroup" atribut , împreună cu data-type="horizontal|vertical" de data-type="horizontal|vertical" pentru a specifica dacă butoanele de grup orizontal sau vertical.
Caseta de bifat
Perechi de etichete și intrări cu atributul type="checkbox" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-mini | true | false | Specifică dacă caseta ar trebui să fie de dimensiuni mici sau regulate |
| data-role | none | Previne jQuery Mobile pentru casetele de selectare stil ca butoane |
| data-theme | letter (a-z) | Specifică culoarea tema caseta de selectare |
Pentru a grupa mai multe casete de selectare, utilizați data-role="controlgroup" de data-type="horizontal|vertical" data-role="controlgroup" , împreună cu data-type="horizontal|vertical" de data-type="horizontal|vertical" pentru a specifica dacă în grupul de casete de selectare orizontal sau vertical.
rabatabil
Un element antet urmat de orice marcare HTML în interiorul unui recipient cu data-role="collapsible" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-collapsed | true | false | Specifică dacă conținutul ar trebui să fie închise sau extinse |
| data-collapsed-cue-text | sometext | Specifică un text pentru a oferi feedback audio pentru utilizatorii cu software-ul cititor de ecran. Implicit este "click to collapse contents" . |
| data-collapsed-icon | Icons Reference | Specifică pictograma butonului pliabil. Implicit este "plus" |
| data-content-theme | letter (a-z) | Specifică culoarea tema a conținutului pliabil. Va adăuga, de asemenea, colțuri rotunjite la conținutul pliabil |
| data-expanded-cue-text | sometext | Specifică un text pentru a oferi feedback audio pentru utilizatorii cu software-ul cititor de ecran. Implicit este "click to expand contents" . |
| data-expanded-icon | Icons Reference | Specifică pictograma butonului pliabil atunci când conținutul este extins. Implicit este "minus" |
| data-iconpos | left | right | top | bottom | Specifică poziția pictogramei |
| data-inset | true | false | Specifică dacă butonul pliabil ar fi stilizat cu colțuri rotunjite și o marjă sau nu |
| data-mini | true | false | Specifică dacă butoanele pliabile ar trebui să fie de dimensiuni mici sau regulate |
| data-theme | letter (a-z) | Specifică culoarea tema a butonului pliabil |
Set pliabilă
Blocuri de conținut în interiorul unui container pliabili cu data-role="collapsibleset" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-collapsed-icon | Icons Reference | Specifică pictograma butonului pliabil. Implicit este "plus" |
| data-content-theme | letter (a-z) | Specifică culoarea tema a conținutului pliabil |
| data-expanded-icon | Icons Reference | Specifică pictograma butonului pliabil atunci când conținutul este extins. Implicit este "minus" |
| data-iconpos | left | right | top | bottom | notext | Specifică poziția pictogramei |
| data-inset | true | false | Specifică dacă collapsibles ar fi stilizat cu colțuri rotunjite și o marjă sau nu |
| data-mini | true | false | Specifică dacă butoanele pliabile ar trebui să fie de dimensiuni mici sau regulate |
| data-theme | letter (a-z) | Specifică culoarea tema setului pliabil |
Conţinut
Depreciată în versiunea 1.4, și vor fi eliminate în 1.5. Container cu data-role="content" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-theme | letter (a-z) | Specifică culoarea tema a conținutului |
Grupul de control
Un <div> sau <fieldset> container cu data-role="controlgroup" . Grupuri multiple intrări-buton stil de un singur tip (butoane bazată pe link, butoane radio, casetele de selectare, selectați elemente). Pentru gruparea casetele de selectare de formă și butoane radio, pentru <fieldset> container este recomandat în interiorul unui <div> cu "ui-fieldcontain" clasa, pentru a îmbunătăți eticheta de stil.
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-exclude-invisible | true | false | Specifică dacă să excludă copiii invizibile în atribuirea colțuri rotunjite |
| data-mini | true | false | Specifică dacă grupul ar trebui să fie de dimensiuni mici sau regulate |
| data-theme | letter (a-z) | Specifică culoarea tema a controlgroup |
| data-type | horizontal | vertical | Specifică dacă grupul trebuie să fie afișată orizontal sau vertical |
dialog
Un container cu data-dialog="true" de data-dialog="true" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-close-btn | left | right | none | Specifică poziția butonului închidere |
| data-close-btn-text | sometext | Specifică textul pentru butonul de închidere |
| data-corners | true | false | Specifică dacă dialogul trebuie să aibă colțuri rotunjite sau nu |
| data-dom-cache | true | false | Specifică dacă pentru a șterge jQuery DOM cache sau nu pentru pagini individuale (dacă este setat la true, trebuie să aibă grijă pentru a gestiona DOM-te și testa temeinic pe toate dispozitivele mobile) |
| data-overlay-theme | letter (a-z) | Specifică suprapunere (background) culoarea paginii de dialog |
| data-theme | letter (a-z) | Specifică culoarea tema a paginii de dialog |
| data-title | sometext | Specifică titlul pentru pagina de dialog |
Sporire
Un container cu data-enhance="false" sau data-ajax="false"
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-enhance | true | false | Dacă este setat la "true" , (default) jQuery Mobile va stilul automat pagina, făcându - l potrivit pentru dispozitivele mobile. Dacă este setat la "false" , cadrul nu va stilizare |
| data-ajax | true | false | Specifică dacă pentru a încărca pagini prin ajax sau nu |
Notă: data-enhance="false" a $.mobile.ignoreContentEnabled=true" data-enhance="false" trebuie să fie utilizat în asociere cu $.mobile.ignoreContentEnabled=true" pentru a opri jQuery Mobile pentru pagini de stil în mod automat.
Orice element de legătură sau formă în interiorul data-ajax="false" containerele vor fi ignorate de funcționalitatea cadrului de navigare atunci când $.mobile.ignoreContentEnabled este setată la true.
Câmp Container
Depreciată în versiunea 1.4, și vor fi eliminate în 1.5. Utilizați class="ui-fieldcontain instead" în class="ui-fieldcontain instead" . Un container cu data-role="fieldcontain" înfășurat în jurul valorii / etichetă formă elementul pereche.
Bara de instrumente fixe
Un container cu data-role="header" sau data-role="footer" , împreună cu data-position="fixed" de data-position="fixed" atribut.
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-disable-page-zoom | true | false | Specifică dacă utilizatorul este capabil de a scala / zoom pagina sau nu |
| data-fullscreen | true | false | Specifică barele de instrumente să fie întotdeauna poziționat în partea de sus și / sau de jos |
| data-tap-toggle | true | false | Specifică dacă utilizatorul este capabil de a comuta bara de instrumente vizibilitate la robinete / clicuri sau nu |
| data-transition | slide | fade | none | Specifică efectul de tranziție atunci când are loc un robinet / clic |
| data-update-page-padding | true | false | Specifică capitonarea atât de sus și de jos a paginii care urmează să fie actualizat la redimensionare, tranziție și "updatelayout" evenimente (jQuery Mobile always updates the padding on the "pageshow" event) |
| data-visible-on-page-show | true | false | Specifică bara de instrumente-vizibilitate atunci când este afișată pagina părinte |
Flip Comutare
Un <input type="checkbox"> cu rol de date "flipswitch" de "flipswitch" :
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-mini | true | false | Specifică dacă comutatorul trebuie să fie de dimensiuni mici sau regulate |
| data-on-text | sometext | Specifică "on" textul de pe comutatorul de flip (default is "On" ) |
| data-off-text | sometext | Specifică "off" textul de pe comutatorul de flip (default is "Off" ) |
Subsol
Un container cu data-role="footer" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-id | sometext | Specifică un ID unic. Necesar pentru subsolurile persistente |
| data-position | inline | fixed | Specifică dacă subsolul ar trebui să fie în linie cu conținutul paginii sau să rămână poziționat în partea de jos |
| data-fullscreen | true | false | Specifică dacă subsolul ar trebui să fie întotdeauna poziționat în partea de jos și peste conținutul paginii (slightly see-through) se (slightly see-through) sau nu |
| data-theme | letter (a-z) | Specifică culoarea tema de subsol |
Notă: Pentru a activa poziția pe tot ecranul, utilizarea data-position="fixed" din data-fullscreen data-position="fixed" și apoi adăugați data-fullscreen atributul elementului.
Antet
Un container cu data-role="header" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-id | sometext | Specifică un ID unic. Necesar pentru antetele persistente |
| data-position | inline | fixed | Specifică dacă antetul ar trebui să fie în linie cu conținutul paginii sau să rămână poziționat în partea de sus |
| data-fullscreen | true | false | Specifică dacă antetul trebuie să fie întotdeauna poziționat în partea de sus și peste conținutul paginii (slightly see-through) se (slightly see-through) sau nu |
| data-theme | letter (a-z) | Specifică culoarea tema a antetului |
Notă: Pentru a activa poziția pe tot ecranul, utilizarea data-position="fixed" din data-fullscreen data-position="fixed" și apoi adăugați data-fullscreen atributul elementului.
Intrări
Intrări cu type="text|search|etc." , type="text|search|etc." sau textarea elements .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-clear-btn | true | false | Specifică dacă intrarea ar trebui să aibă un "clear" buton |
| data-clear-btn-text | text | Specifică un text pentru "clear" buton. Implicit este "clear text" |
| data-mini | true | false | Specifică dacă intrarea ar trebui să fie de dimensiuni mici sau regulate |
| data-role | none | Previne jQuery Mobile pentru stilul de intrări / textarea ca butoane |
| data-theme | letter (a-z) | Specifică culoarea tema a campului de intrare |
Legătură
Toate link-urile.
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-ajax | true | false | Specifică dacă pentru a încărca pagini prin ajax pentru o experiență de utilizare îmbunătățită și tranziții. Dacă este setat la fals, jQuery Mobile va face o solicitare normală a paginii. |
| data-direction | reverse | Animație de tranziție inversă (only for page or dialog) de (only for page or dialog) |
| data-dom-cache | true | false | Specifică dacă pentru a șterge jQuery DOM cache sau nu pentru pagini individuale (dacă este setat la true, trebuie să aibă grijă pentru a gestiona DOM-te și testa temeinic pe toate dispozitivele mobile) |
| data-prefetch | true | false | Specifică dacă predescărcați pagini în DOM, astfel încât acestea să fie disponibile atunci când utilizatorul le vizitează |
| data-rel | back | dialog | external | popup | Specifică o opțiune pentru modul în care link-ul ar trebui să se comporte. Înapoi - Mută un pas înapoi în istorie. Dialog - Deschide un link ca un dialog, nu au fost înregistrate în istorie. Extern - Pentru conectarea la un alt domeniu. Popup - deschide o fereastră pop-up. |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Specifică modul de tranziție de la o pagină la alta. A se vedea noastre jQuery Treceri mobile capitol. |
| data-position-to | origin | jQuery selector | window | Specifică poziția de casete pop-up. Origine - implicit. Poziții fereastra pop-up pe link-ul care se deschide. selector jQuery - poziționează pop-up peste elementul specificat. Fereastra - poziționează fereastra pop-up în mijlocul ecranului ferestrei. |
Listă
O <ol> sau <ul> cu data-role="listview" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-autodividers | true | false | Specifică dacă se împartă în mod automat elementele de listă sau nu |
| data-count-theme | letter (a-z) | Specifică culoarea tema bulei numărului |
| data-divider-theme | letter (a-z) | Specifică culoarea tema listei divizorului |
| data-filter | true | false | Specifică dacă să adăugați o casetă de căutare într-o listă sau nu |
| data-filter-placeholder | sometext | Depreciată în versiunea 1.4. Utilizați atributul înlocuitor HTML în loc. Specifică textul din interiorul casetei de căutare. Implicit este "Filter items..." de "Filter items..." |
| data-filter-theme | letter (a-z) | Specifică culoarea tema a filtrului de căutare |
| data-icon | Icons Reference | Specifică pictograma listei |
| data-inset | true | false | Specifică dacă lista ar trebui sa fie stilizat cu colțuri rotunjite și o marjă sau nu |
| data-split-icon | Icons Reference | Specifică pictograma butonului divizat. Implicit este "arrow-r" |
| data-split-theme | letter (a-z) | Specifică culoarea tema a butonului divizat |
| data-theme | letter (a-z) | Specifică culoarea tema listei |
elementul din listă
O <li> în interiorul unui <ol> sau <ul> cu data-role="listview" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-filtertext | sometext | Specifică un text pentru a căuta la filtrarea elementelor. Acest text va fi apoi filtrate în loc de textul real element listă |
| data-icon | Icons Reference | Specifică pictograma elementului din listă |
| data-role | list-divider | Specifică un separator pentru elemente de listă |
| data-theme | letter (a-z) | Specifică culoarea tema a elementului din listă |
Notă: data-icon de data-icon atribut numai de lucru pe elemente din listă cu link - uri.
navbar
<li> elemente din interiorul unui recipient cu data-role="navbar" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-icon | Icons Reference | Specifică pictograma elementului din listă |
| data-iconpos | left | right | top | bottom | notext | Specifică poziția pictogramei |
Navbars moștenesc tema-specimenului din recipientul lor mamă. Nu este posibil să setați data-theme atributul unui navbar. De data-theme atribut poate fi setat individual pentru fiecare link în interiorul navbar.
Pagină
Un container cu data-role="page" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-dom-cache | true | false | Specifică dacă pentru a șterge jQuery DOM cache sau nu pentru pagini individuale (dacă este setat la true, trebuie să aibă grijă pentru a gestiona DOM-te și testa temeinic pe toate dispozitivele mobile) |
| data-overlay-theme | letter (a-z) | Specifică suprapunere (background) culoarea de pagini de dialog |
| data-theme | letter (a-z) | Specifică culoarea tema a paginii |
| data-title | sometext | Specifică titlul paginii |
| data-url | url | Valoare pentru actualizarea URL-ul, în loc de URL-ul folosit pentru a solicita pagina |
Pop-up
Un container cu data-role="popup" - data-role="popup" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-corners | true | false | Specifică dacă fereastra pop-up ar trebui să aibă colțuri rotunjite sau nu |
| data-dismissible | true | false | Specifică dacă fereastra pop-up ar trebui să fie închise, făcând clic în afara ferestrei pop-up sau nu |
| data-history | true | false | Specifică dacă fereastra pop-up ar trebui să creeze un element de istorie browser-ul atunci când este deschis. Dacă este setat la fals, acesta nu va crea un element istoric, apoi nu va fi închisă , prin intermediul browser - ului "Back" buton |
| data-overlay-theme | letter (a-z) | Specifică suprapunere (background) culoarea casetei pop - up. Implicit este fundal transparent (none) . |
| data-shadow | true | false | Specifică dacă caseta pop-up ar trebui să aibă umbre sau nu |
| data-theme | letter (a-z) | Specifică culoarea tema a casetei pop-up. Implicit moștenită, "none" , setează fereastra pop - up la transparent |
| data-tolerance | 30, 15, 30, 15 | Specifică distanța de la marginile ferestrei ( de top, right, bottom, left ) |
O ancoră cu data-rel="popup" - data-rel="popup" :
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-position-to | origin | jQuery selector | window | Specifică poziția de casete pop-up. Origine - implicit. Poziții fereastra pop-up pe link-ul care se deschide. selector jQuery - poziționează pop-up peste elementul specificat. Fereastra - poziționează fereastra pop-up în mijlocul ecranului ferestrei. |
| data-rel | popup | Pentru a deschide caseta pop-up |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Specifică modul de tranziție de la o pagină la alta. A se vedea noastre jQuery Treceri mobile capitol. |
Buton de radio
Perechi de etichete și intrări cu type="radio" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-mini | true | false | Specifică dacă butonul ar trebui să fie de dimensiuni mici sau regulate |
| data-role | none | Previne jQuery Mobile pentru stilul de radiobuttons ca butoane îmbunătățite |
| data-theme | letter (a-z) | Specifică culoarea tema a butonului de radio |
Pentru mai multe butoane radio de grup, utilizați data-role="controlgroup" de data-type="horizontal|vertical" data-role="controlgroup" , împreună cu data-type="horizontal|vertical" de data-type="horizontal|vertical" pentru a specifica dacă gruparea butoanelor orizontal sau vertical.
Selectați
Toate <select> elemente.
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-icon | Icons Reference | Specifică pictograma elementul select. Implicit este "arrow-d" |
| data-iconpos | left | right | top | bottom | notext | Specifică poziția pictogramei |
| data-inline | true | false | Specifică dacă elementul select ar trebui să fie în linie sau nu |
| data-mini | true | false | Specifică dacă selectat trebuie să fie de dimensiuni mici sau regulate |
| data-native-menu | true | false | Când este setat la fals, se folosește selectați meniul propriu personalizat jQuery (recomandat dacă doriți ca meniul de selectare pentru a afișa aceeași pe toate dispozitivele mobile) |
| data-overlay-theme | letter (a-z) | Specifică culoarea tema de meniu select propriu personalizat jQuery (utilizat împreună cu data-native-menu="false" ) |
| data-placeholder | true | false | Poate fi setat pe <option> element al unui select non-nativi |
| data-role | none | Previne jQuery Mobile să selectați elementele de stil ca butoane |
| data-theme | letter (a-z) | Specifică culoarea tema de elementul select |
Pentru mai multe elemente de grup selectați, utilizați data-role="controlgroup" de data-type="horizontal|vertical" data-role="controlgroup" , împreună cu data-type="horizontal|vertical" de data-type="horizontal|vertical" pentru a specifica dacă pentru a grupa elementele pe orizontală sau pe verticală.
cursor
Intrări cu type="range" .
| Data-atribut | Valoare | Descriere |
|---|---|---|
| data-highlight | true | false | Specifică dacă piesa cursor ar trebui să fie evidențiate sau nu |
| data-mini | true | false | Specifică dacă cursorul ar trebui să fie de dimensiuni mici sau regulate |
| data-role | none | Previne jQuery Mobile pentru comenzi de stil culisare ca butoane |
| data-theme | letter (a-z) | Specifică culoarea tema a cursorului (de intrare, mâner și urmăriți) |
| data-track-theme | letter (a-z) | Specifică culoarea tema a pistei cursorului |