jQuery Mobile Data egenskaper

jQuery Data Egenskaper

jQuery Mobile använder HTML5 data-*-egenskaper för att skapa ett "touchvänligt" och estetiskt tilltalande utseende för mobila enheter.

I den nedanstående referenslistan definierar de fetmarkerade värdena standardvärdena.

Knapp

Hyperlänkar med data-role="button". Knappkomponenter och länkar samt inmatningsfält i verktygsfältet kommer att automatiskt få knappstil, utan behov av data-role="button".

Data egenskaper Värde Beskrivning
data-corners true | false Definiera om knapparna ska ha rundade hörn eller inte.
All <select> elements. They will be automatically styled as buttons and do not require date-role. data-icon Definiera ikonen för knapparna. Standard är att det inte finns någon ikon.
Specify the icon of the select element. The default is "arrow-d". data-iconpos Specify the position of the icon. It can be left | right | top | bottom | notext.
data-iconshadow true | false Definiera om knapparnas ikoner ska ha skugga eller inte.
data-inline true | false Definiera om knapparna ska vara inrymda.
data-mini true | false Definiera om knapparna ska vara små eller vanliga storlekar.
data-shadow true | false Definiera om knapparna ska ha skugga eller inte.
data-theme bokstav (a-z) Definiera knapparnas temafärg.

Tip:Om du vill kombinera flera knappar, använd en behållare med egenskaperna data-role="controlgroup" och data-type="horizontal|vertical" för att definiera om kombinationen av knappar ska vara horisontell eller vertikal.

Kryssruta

Label och input med type="checkbox" är par. De kommer att sättas till stil som en knapp automatiskt, utan behov av data-role.

Data egenskaper Värde Beskrivning
data-mini true | false Bestäm om kryssrutan ska vara i liten eller standardstorlek.
data-role none Förhindra att jQuery Mobile sätter kryssrutan i stil som en knapp.
data-theme bokstav (a-z) Bestäm temafärgen för kryssrutorna.

Tip:För att kombinera flera kryssrutor, använd data-role="controlgroup" och data-type="horizontal|vertical" för att bestämmer om kryssrutorna ska vara horisontella eller vertikala.

Collapsible

Titel元素, följt av vilket som helst HTML-märke inom container med data-role="collapsible"-egenskapen.

Data egenskaper Värde Beskrivning
data-collapsed true | false Bestäm om innehållet ska vara stängt eller öppnat.
data-collapsed-icon data-icon Bestäm ikonen för kollapsningsknapparna. Standard är "plus".
data-content-theme bokstav (a-z) Bestäm temafärgen för kollapsningsinnehållet. Lägg också till rundade hörn på kollapsningsinnehållet.
data-expanded-icon data-icon Bestäm ikonen för kollapsningsknapparna när innehållet är utökat. Standard är "minus".
Specify the icon of the select element. The default is "arrow-d". vänster | höger | topp | botten Specify the position of the icon. It can be left | right | top | bottom | notext.
data-inset true | false Bestäm om kollapsningsknapparna ska ha rundade hörn och marginaler.
data-mini true | false Bestäm om kollapsningsknapparna ska vara i liten eller standardstorlek.
data-theme bokstav (a-z) Bestäm temafärgen för kollapsningsknapparna.

Collapsible Set

Kollapsningsinnehåll inom container med data-role="collapsible-set"-egenskapen.

Data egenskaper Värde Beskrivning
data-collapsed-icon data-icon Bestäm ikonen för kollapsningsknapparna. Standard är "plus".
data-content-theme bokstav (a-z) Bestäm temafärgen för kollapsningsinnehållet.
data-expanded-icon data-icon Bestäm ikonen för kollapsningsknapparna när innehållet är utökat. Standard är "minus".
Specify the icon of the select element. The default is "arrow-d". data-iconpos Specify the position of the icon. It can be left | right | top | bottom | notext.
data-inset true | false Bestäm om kollapsningsknapparna ska ha rundade hörn och marginaler.
data-mini true | false Bestäm om kollapsningsknapparna ska vara i liten eller standardstorlek.
data-theme bokstav (a-z) Bestäm temafärgen för kollapsbara sammansättningar.

Content

Container med data-role="content"-egenskapen.

Data egenskaper Värde Beskrivning
data-theme bokstav (a-z) Bestäm temafärgen för innehållet. Standard är "c".

Controlgroup

Div eller fieldset-container med data-role="controlgroup"-egenskapen. Kombinera flera input med en enda typ av knapptillverkning (baserat på länkknappar, radioknappar, kryssrutor, valmenyer).

Data egenskaper Värde Beskrivning
data-mini true | false Bestäm om kombinationen ska vara i liten eller standardstorlek.
data-type horisontell | vertikal Bestäm om kombinationen ska visas horisontellt eller vertikalt.

Dialog

Container med data-role="dialog" eller länk med data-rel="dialog".

Data egenskaper Värde Beskrivning
data-close-btn-text sometext Bestämmer texten för stängningsknappen endast för dialoger.
data-dom-cache true | false Bestämmer om jQuery DOM-cachen för enskilda sidor ska rensas (om inställd till true, bör du notera förvaltning av DOM och genomföra fullständiga tester på alla mobila enheter).
data-overlay-theme bokstav (a-z) Definiera dialogsidans överlappande (bakgrundsfärg).
data-theme bokstav (a-z) Bestämmer temafärgen för dialogsidan.
data-title sometext Bestämmer titeln för dialogsidan.

Förbättring

Behållare med egenskaperna data-enhance="false" eller data-ajax="false".

Data egenskaper Värde Beskrivning
data-enhance true | false Om satt till "true" (standard), lägger jQuery Mobile automatiskt till sidostilar för att göra dem mer lämpliga för mobila enheter. Om satt till "false", sätter ramverket inte in sidostilar.
data-ajax true | false Bestämmer om sidan laddas via AJAX.

Kommentar:data-enhance="false", t.ex. tillsammans med $.mobile.ignoreContentEnabled=true", för att förhindra att jQuery Mobile automatiskt lägger till sidostilar.

När $.mobile.ignoreContentEnabled sätts till true, ignoreras alla länkar eller formularelement i behållare med data-ajax="false" av ramverkets navigationsfunktion.

Fieldcontainer

Förpackar label/form-elementparet med data-role="fieldcontain".

Fast verktygsfält

Behållare med egenskaperna data-role="header" eller data-role="footer" samt data-position="fixed".

Data egenskaper Värde Beskrivning
data-disable-page-zoom true | false Bestämmer om användaren kan zooma in på sidan.
data-fullscreen true | false Bestämmer om verktygsfältet alltid ska vara placerat på toppen och/eller botten.
data-tap-toggle true | false Bestämmer om användaren kan växla synligheten för verktygsfältet genom att klicka eller trycka.
data-transition slide | fade | none Ställer in övergångseffekten vid klick eller tryck.
data-update-page-padding true | false Uppdaterar sidans övre, nedre och inre marginaler vid händelser som resize, transition och "updatelayout" (jQuery Mobile uppdaterar alltid marginalerna vid "pageshow"-händelsen).
data-visible-on-page-show true | false Ställer in synlighet för verktygsfältet när föräldrapage visas.

Vippa växlingsknapp

En <select>-element med data-role="slider"-egenskap och två <option>-element.

Data egenskaper Värde Beskrivning
data-mini true | false Bestämmer om växlingsknappen är liten eller normalstor.
data-role none Förhindrar att jQuery Mobile sätter växlingsknappar i knappstil.
data-theme bokstav (a-z) Bestämmer temat för knappar för växling.
data-track-theme bokstav (a-z) Bestämmer temat för spårens färg.

Footer

Container med data-role="footer"-egenskapen.

Data egenskaper Värde Beskrivning
data-id sometext Bestämmer unik ID. Det är nödvändigt för persistenta sidfötter.
data-position inline | fast Bestämmer om sidfoten har en inline-relationskap med sidinnehållet eller om den behålls i botten.
data-fullscreen true | false Bestämmer om sidfoten alltid ligger nederst och täcker sidinnehållet (ljust genomskinligt).
data-theme bokstav (a-z) Bestämmer temat för sidfots färg. Standard är "a".

Kommentar:För att aktivera fullscreen-positionering, använd data-position="fast" och lägg till data-fullscreen-egenskapen för elementet.

Header

Container med data-role="header".

Data egenskaper Värde Beskrivning
data-id sometext Bestämmer unik ID. Det är nödvändigt för persistenta sidhuvuden.
data-position inline | fast Bestämmer om sidhuvudet har en inline-relationskap med sidinnehållet eller om det behålls i toppen.
data-fullscreen true | false Bestämmer om sidhuvudet alltid ligger ovanpå sidinnehållet (ljust genomskinligt).
data-theme bokstav (a-z) Bestämmer temat för sidhuvudets färg. Standard är "a".

Kommentar:För att aktivera fullscreen-positionering, använd data-position="fast" och lägg till data-fullscreen-egenskapen för elementet.

Länk

Alla länkar, inklusive länkar med data-role="button" samt formulärsubmitknappar.

Data egenskaper Värde Beskrivning
data-ajax true | false Bestämmer om sidan ska laddas via AJAX för att förbättra användarupplevelsen och övergången. Om satt till false, kommer jQuery Mobile att göra en vanlig sidoförfrågan.
data-direction invertera Inverterar övergångsanimationer (endast för sidor eller dialoger)
data-dom-cache true | false Definiera om specifika sidors jQuery DOM-cache ska rengöras (om den är satt till true, bör du vara uppmärksam på DOM-hanteringen och genomgå fullständig testning på alla mobila enheter).
data-prefetch true | false Bestämmer om sidan ska förhållandevis laddas till DOM, så att den är tillgänglig vid användarbesök.
data-rel bakåt | dialog | extern | popup Bestämmer alternativ för hur länkar beter sig. Tillbaka - Går ett steg bakåt i historiken. Dialog - Öppnar sidan som en dialog, utan att spara i historiken. Extern - Länkar till en annan domän. Öppnar - Öppnar en popup-fönster.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Definiera hur man övergår från en sida till nästa. Se jQuery Mobile övergångar.
data-position-to origin | jQuery selector | window Definiera popup-fönstrets plats. Ursprung - Standard. Poppar upp vid öppning av dess länk. jQuery-väljare - Popup på det angivna elementet. Fönster - Popup i mitten av fönstret.

List

Inom <ol> eller <ul> med data-role="listview"-egenskapen.

Data egenskaper Värde Beskrivning
data-autodividers true | false Bestäm om listelementen ska delas automatiskt.
data-count-theme bokstav (a-z) Bestäm temakulören för räknebobbarna. Standard är "c".
data-divider-theme bokstav (a-z) Bestäm temakulören för listavskiljaren. Standard är "b".
data-filter true | false Bestäm om sökfältet ska läggas till i listan.
data-filter-placeholder sometext Bestäm texten i sökfältet. Standard är "Filter items...".
data-filter-theme bokstav (a-z) Bestäm temakulören för sökfiltret. Standard är "c".
All <select> elements. They will be automatically styled as buttons and do not require date-role. data-icon Bestäm ikonen för listan.
data-inset true | false Bestäm om listan ska lägga till rundade hörn och marginaler.
data-split-icon data-icon Bestäm ikonen för delningsknappen. Standard är "arrow-r".
data-split-theme bokstav (a-z) Bestäm temakulören för delningsknappen. Standard är "b".
data-theme bokstav (a-z) Bestäm temakulören för listan.

List item

Inom <ol> eller <ul> med data-role="listview"-egenskapen finns <li>.

Data egenskaper Värde Beskrivning
data-filtertext sometext Bestäm texten som söks vid filtrering av element. Denna text, inte den faktiska texten för listelementen, kommer att sökas.
All <select> elements. They will be automatically styled as buttons and do not require date-role. data-icon Bestäm ikonen för listelementen.
data-role list-divider Bestäm avskiljaren för listelementen.
data-theme bokstav (a-z) Bestäm temakulören för listelementen.

Kommentar:data-icon-egenskapen gäller endast för listelement som innehåller länkar.

Navbar

Inom containeren med data-role="navbar"-egenskapen finns <li>-element.

Data egenskaper Värde Beskrivning
All <select> elements. They will be automatically styled as buttons and do not require date-role. data-icon Bestäm ikonen för listelementen.
Specify the icon of the select element. The default is "arrow-d". data-iconpos Specify the position of the icon. It can be left | right | top | bottom | notext.

Tip:Navigationsfältet ärver theme-swatch från sin föräldrakontainer. Det är inte möjligt att sätta data-theme-egenskapen för navigationsfältet. Det är möjligt att sätta data-theme-egenskapen för varje länk i navbar separat.

Page

Container med data-role="page"-egenskapen.

Data egenskaper Värde Beskrivning
data-add-back-btn true | false Lägg till tillbaka-knappen automatiskt, endast för rubrikfält.
data-back-btn-text sometext Bestäm texten för tillbaka-knappen.
data-back-btn-theme bokstav (a-z) Bestäm temakulören för tillbaka-knappen.
data-close-btn-text bokstav (a-z) Bestäm texten för stängningsknappen på dialogen.
data-dom-cache true | false Definiera om specifika sidors jQuery DOM-cache ska rengöras (om den är satt till true, bör du vara uppmärksam på DOM-hanteringen och genomgå fullständig testning på alla mobila enheter).
data-overlay-theme bokstav (a-z) Definiera dialogsidans överlappande (bakgrundsfärg).
data-theme bokstav (a-z) Definiera sidans temafärg. Standard är "c".
data-title sometext Definiera sidans titel.
data-url url Värdet används för att uppdatera URL:en, inte för att göra en förfrågan till sidan.

Popup

Behållare med data-role="popup"-egenskapen.

Data egenskaper Värde Beskrivning
data-corners true | false Definiera om popup-fönstret ska ha rundade hörn.
data-overlay-theme bokstav (a-z) Definiera popup-fönstrets överlappande (bakgrundsfärg). Standard är genomskinlig bakgrund (none).
data-shadow true | false Definiera om popup-fönstret ska ha skugga.
data-theme bokstav (a-z) Definiera popup-fönstrets temafärg. Standard är att ärva, "none" ställer in som genomskinlig.
data-tolerance 30, 15, 30, 15 Definiera avståndet från kanten av fönstret (top, right, bottom, left).

Ankor med data-rel="popup"-egenskapen:

Data egenskaper Värde Beskrivning
data-position-to origin | jQuery selector | window Definiera popup-fönstrets plats. Origin - standard. Popup-fönstret ligger på den länk som öppnar det. jQuery selector - popup-fönstret ligger på den specificerade elementen. Window - popup-fönstret ligger i mitten av skärmen.
data-rel popup För att öppna en popup-fönster.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Definiera hur man övergår från en sida till nästa. Se jQuery Mobile övergångar.

Radio Button

label och input som motsvarar type="radio" kommer automatiskt att sättas i knapptillstånd, utan att behöva data-role.

Data egenskaper Värde Beskrivning
data-mini true | false Definiera om knappar ska vara små eller vanliga storlekar.
data-role none Placera jQuery Mobile för att sätta enskilda alternativknappar i stil med förstärkta knappar.
data-theme bokstav (a-z) Definiera enskilda alternativknapparnas temafärg.

Tip:För att kombinera flera enskilda alternativknappar, använd data-role="controlgroup" och data-type="horizontal|vertical" för att definiera om knappar ska kombineras horisontellt eller vertikalt.

Select

Select

Data egenskaper Värde Beskrivning
All <select> elements. They will be automatically styled as buttons and do not require date-role. data-icon Icons Reference
Specify the icon of the select element. The default is "arrow-d". data-iconpos Specify the position of the icon. It can be left | right | top | bottom | notext.
data-inline true | false Specify whether the select element is inline.
data-mini true | false Specify whether the select element is small or regular size.
data-native-menu true | false If set to false, jQuery's own custom select menu will be used (it is recommended to use it if you want the selection menu to have a consistent appearance on all mobile devices).
data-overlay-theme bokstav (a-z) Specify the theme color of jQuery custom select menu (used with data-native-menu="false").
data-placeholder true | false Can be set on the non-native <option> element of select.
data-role none Apply jQuery Mobile to set the select element as a button style.
data-theme bokstav (a-z) Specify the theme color of the select element.

Tip:To combine multiple select elements, use data-role="controlgroup" and data-type="horizontal|vertical" to specify whether to combine the element horizontally or vertically.

Slider

input element with type="range". It will be automatically styled as a button and does not require data-role.

Data egenskaper Värde Beskrivning
data-highlight true | false Specify whether to highlight the slider track.
data-mini true | false Specify whether the slider is small or regular size.
data-role none Apply jQuery Mobile to set the style of the slider button.
data-theme bokstav (a-z) Specify the theme color of the slider control (input, handle, and track).
data-track-theme bokstav (a-z) Specify the theme color of the slider track.

Text input & Textarea

input element or textarea element with type="text|search|etc.". It will be automatically styled and does not require data-role.

Data egenskaper Värde Beskrivning
data-mini true | false Bestämmer om input-elementet är smått eller vanligt storlek.
data-role none Placerar jQuery Mobile som ställer in input/textarea som en knapp.
data-theme bokstav (a-z) Bestämmer färgen på temat för inmatningsfält.