jQuery Mobile Data egenskab

jQuery Data Egenskaber

jQuery Mobile bruger HTML5 data-* egenskaber til at skabe et smukt og "berøringssikkert" udseende for mobile enheder.

I nedenstående referenceliste bestemmer de fedtskrivne værdier standardværdierne.

Knap

Hyperlinks med data-role="button". Knappenelementer og links samt inputfelter i værktøjslinjen vil blive automatisk sat til knapstil, uden behov for data-role="button".

Data egenskaber Værdi Beskrivelse
data-corners true | false Bestem om knapperne skal have runde kanter.
data-icon Ikoner Reference Bestem knappenemne. Standard er ingen ikon.
data-iconpos venstre | højre | øverst | nederst | without text Angiver ikonets placering.
data-iconshadow true | false Bestem om knappenemne skal have skygge.
data-inline true | false Bestem om knapperne skal være indlejrede.
data-mini true | false Bestem om knapperne skal være små eller vanlige størrelser.
data-shadow true | false Bestem om knapperne skal have skygge.
data-theme letter (a-z) Bestem knappe主题颜色。

Bemærk:Hvis du vil kombinere flere knapper, brug en beholder med egenskaberne data-role="controlgroup" og data-type="horizontal|vertical", for at bestemme om knapperne skal kombineres horisontalt eller vertikalt.

Kontrolkasse

label og input med type="checkbox" er parret. De vil automatisk blive sat til knapstil uden brug af data-role.

Data egenskaber Værdi Beskrivelse
data-mini true | false Bestem om afkrydsningsfelterne skal være lille eller standardstørrelse.
data-role none Forhindr jQuery Mobile i at sætte afkrydsningsfelterne til knapstil.
data-theme letter (a-z) Bestem temakolor for afkrydsningsfelterne.

Bemærk:For at kombinere flere afkrydsningsfelter, brug data-role="controlgroup" og data-type="horizontal|vertical" for at bestemme om afkrydsningsfelterne skal kombineres horisontalt eller vertikalt.

Collapsible

Titel element, efterfulgt af hvilken som helst HTML-mærkning placeret i en container med data-role="collapsible"-egenskab.

Data egenskaber Værdi Beskrivelse
data-collapsed true | false Bestem om indholdet skal lukkes eller åbnes.
data-collapsed-icon Ikoner Reference Bestem ikon for foldbare knapper. Standard er "plus".
data-content-theme letter (a-z) Bestem temakolor for foldbart indhold. Det vil også tilføje runde kanter til indholdet.
data-expanded-icon Ikoner Reference Bestem ikon for foldbare indhold når det er åbent. Standard er "minus".
data-iconpos left | right | top | bottom Angiver ikonets placering.
data-inset true | false Bestem om foldbare knapper skal have runde kanter og marginer.
data-mini true | false Bestem om foldbare knapper skal være lille eller standardstørrelse.
data-theme letter (a-z) Bestem temakolor for foldbare knapper.

Collapsible Set

Foldbare indholdselementer i containeren med data-role="collapsible-set"-egenskab.

Data egenskaber Værdi Beskrivelse
data-collapsed-icon Ikoner Reference Bestem ikon for foldbare knapper. Standard er "plus".
data-content-theme letter (a-z) Bestem temakolor for foldbart indhold.
data-expanded-icon Ikoner Reference Bestem ikon for foldbare indhold når det er åbent. Standard er "minus".
data-iconpos venstre | højre | øverst | nederst | without text Angiver ikonets placering.
data-inset true | false Bestem om foldbare elementer skal have runde kanter og marginer.
data-mini true | false Bestem om foldbare knapper skal være lille eller standardstørrelse.
data-theme letter (a-z) Bestem temakolor for foldbare indhold.

Content

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

Data egenskaber Værdi Beskrivelse
data-theme letter (a-z) Bestem temakolor for indholdet. Standard er "c".

Controlgroup

Container med data-role="controlgroup"-egenskab, <div> eller <fieldset>. Kombiner flere input med en enkelt type knapstil (knapper, afkrydsningsfelter, valgmenuer baseret på links).

Data egenskaber Værdi Beskrivelse
data-mini true | false Bestem om kombinationen skal være lille eller standardstørrelse.
data-type horizontal | vertical Bestem om kombinationen skal vises horisontalt eller vertikalt.

Dialog

Container eller link med data-role="dialog" eller data-rel="dialog".

Data egenskaber Værdi Beskrivelse
data-close-btn-text sometext Angiver teksten til kun lukkeknappen i dialogen.
data-dom-cache true | false Angiver, om der skal afinstalleres jQuery DOM cache for enkelte sider (hvis indstillet til true, skal der tages højde for DOM's administration og testes grundigt på alle mobile enheder).
data-overlay-theme letter (a-z) Definer dialog sidens overlap (baggrund) farve.
data-theme letter (a-z) Angiver dialog sidens hovedfarve.
data-title sometext Angiver titlen på dialog siden.

Forbedring

Beholder med data-enhance="false" eller data-ajax="false" egenskab.

Data egenskaber Værdi Beskrivelse
data-enhance true | false Hvis indstillet til "true" (standard), tilføjer jQuery Mobile automatisk sideskabeloner, der passer bedre til mobile enheder. Hvis indstillet til "false", sætter rammen ikke siderne til skabeloner.
data-ajax true | false Angiver, om der indlæses side via AJAX.

Kommentar:data-enhance="false", f.eks. sammen med $.mobile.ignoreContentEnabled=true, for at forhindre jQuery Mobile i at automatisk tilføje sideskabeloner.

Når $.mobile.ignoreContentEnabled sættes til true, ignoreres alle links eller form-elementer i beholderen med data-ajax="false" af rammens navigationsfunktion.

Fieldcontainer

Indpakker label/form-elementpar med data-role="fieldcontain" beholder.

Fast værktøjslinje

Beholder med data-role="header" eller data-role="footer" egenskab samt data-position="fixed" egenskab.

Data egenskaber Værdi Beskrivelse
data-disable-page-zoom true | false Angiver, om brugeren kan zoome ind på siden.
data-fullscreen true | false Angiver, om værktøjslinjen altid skal være øverst samt/eller nederst.
data-tap-toggle true | false Angiver, om brugeren kan skifte værktøjslinjens synlighed ved klik/knaptryk.
data-transition slide | fade | none Angiver overgangseffekten, der sker ved klik/knaptryk.
data-update-page-padding true | false Opdaterer sidepaddingen oppe/nede og indad, når der sker resize, transition og "updatelayout"-begivenheder (jQuery Mobile opdaterer altid padding ved "pageshow"-begivenheden).
data-visible-on-page-show true | false Angiver synligheden af værktøjslinjen, når forældresiden vises.

Vend bryter

En <select>-element med data-role="slider"-egenskap og to <option>-elementer.

Data egenskaber Værdi Beskrivelse
data-mini true | false Definer om bryteren er liten eller vanlig størrelse.
data-role none Forhindre at jQuery Mobile setter brytere til knappestil.
data-theme letter (a-z) Definer temaets farge for brytere.
data-track-theme letter (a-z) Definer temaets farge for spor.

Bunn

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

Data egenskaber Værdi Beskrivelse
data-id sometext Definer en unik ID. Nødvendig for persistente bunner.
data-position inline | fixed Definer om bunnen er en inline-forhold til sideinnholdet eller beholdes nederst.
data-fullscreen true | false Definer om bunnen alltid skal være nederst og dekke sideinnholdet (delvis gjennomsiktig).
data-theme letter (a-z) Definer temaets farge for bunnen.

Kommentar:For å aktivere fullscreen-justering, bruk data-position="fixed", og legg til data-fullscreen-egenskapen for elementet.

Hode

Beholder for data-role="header".

Data egenskaber Værdi Beskrivelse
data-id sometext Definer en unik ID. Nødvendig for persistente hoder.
data-position inline | fixed Definer om sidehovedet er en inline-forhold til sideinnholdet eller beholdes øverst.
data-fullscreen true | false Definer om siden alltid skal være øverst og dekke sideinnholdet (delvis gjennomsiktig).
data-theme letter (a-z) Definer temaets farge for sidehovedet. Standard er "a".

Kommentar:For å aktivere fullscreen-justering, bruk data-position="fixed", og legg til data-fullscreen-egenskapen for elementet.

Lenke

Alle lenker, inkludert lenker med data-role="button" og formularmeldingsknapper.

Data egenskaber Værdi Beskrivelse
data-ajax true | false Definer om siden skal lastes inn via AJAX for å forbedre brukeropplevelsen og overgangen. Hvis satt til false, vil jQuery Mobile utføre en vanlig sideforespørsel.
data-direction reverse Reverser overgangsanimasjon (kun for sider eller dialoger)
data-dom-cache true | false Definer om der skal renses jQuery DOM cache for individuelle sider (hvis indstillet til true, skal du være opmærksom på DOM's administration og test alle mobile enheder grundigt).
data-prefetch true | false Definer om siden skal forhåndslastes til DOM, slik at den er tilgjengelig når brukeren besøker den.
data-rel back | dialog | external | popup Definer valg for hvordan lenker oppfører seg. Tilbake - Gå ett steg tilbake i historikken. Dialog - Åpne siden som en dialog, ikke loggføre i historikk. Ekstern - Koble til en annen domene. Åpne - Åpne en pop opp-vindu.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Definer hvordan der sker en overgang fra en side til den næste. Se jQuery Mobile's overgange.
data-position-to origin | jQuery selector | window Definer pop-up-vinduets placering. Kilde - Standard. Pop op ved å åpne lenken. jQuery selector - Pop op på den angivne element. Vindue - Pop op i midten af vindues-skærmen.

List

Elementer <ol> eller <ul> med data-role="listview" attribut.

Data egenskaber Værdi Beskrivelse
data-autodividers true | false Definer om der skal opdeles listeemner automatisk.
data-count-theme letter (a-z) Definer temaets farve for tællerboblen. Standard er "c".
data-divider-theme letter (a-z) Definer temaets farve for listeopdæmpning. Standard er "b".
data-filter true | false Definer om der skal tilføjes en søgefelt til listen.
data-filter-placeholder sometext Definer teksten i søgefeltet. Standard er "Filter items...".
data-filter-theme letter (a-z) Definer temaets farve for søgefilterprogrammet. Standard er "c".
data-icon Ikoner Reference Definer ikonet for listen.
data-inset true | false Definer om der skal tilføjes runde kanter og marginer til listen.
data-split-icon Ikoner Reference Definer ikonet for opdæmpningsknappen. Standard er "arrow-r".
data-split-theme letter (a-z) Definer temaets farve for opdæmpningsknappen. Standard er "b".
data-theme letter (a-z) Definer temaets farve for listen.

Listeemne

Elementer <li> i <ol> eller <ul> med data-role="listview" attribut.

Data egenskaber Værdi Beskrivelse
data-filtertext sometext Definer teksten, der søges, når der filtreres elementer. Denne tekst i stedet for faktiske listeemne tekst vil blive søgt efter.
data-icon Ikoner Reference Definer ikonet for listeemner.
data-role list-divider Definer separator for listeemner.
data-theme letter (a-z) Definer temaets farve for listeemner.

Kommentar:data-icon attribut er kun tilgængelig for listeemner med links.

Navigationsfelt

Elementer <li> inde i containeren med data-role="navbar" attribut.

Data egenskaber Værdi Beskrivelse
data-icon Ikoner Reference Definer ikonet for listeemner.
data-iconpos venstre | højre | øverst | nederst | without text Angiver ikonets placering.

Bemærk:Navigationsfeltet arver theme-swatch fra sin overordnede container. Det er ikke muligt at sætte data-theme attribut til navigationsfeltet. Man kan dog særskilt sætte data-theme attribut til hver link i navbar.

Side

Container med data-role="page" attribut.

Data egenskaber Værdi Beskrivelse
data-add-back-btn true | false Automatisk tilføj tilbageknappen, kun brugt i sidehovedet.
data-back-btn-text sometext Definer teksten for tilbageknappen.
data-back-btn-theme letter (a-z) Definer temaets farve for tilbageknappen.
data-close-btn-text letter (a-z) Definer teksten for lukkeknappen på dialogen.
data-dom-cache true | false Definer om der skal renses jQuery DOM cache for individuelle sider (hvis indstillet til true, skal du være opmærksom på DOM's administration og test alle mobile enheder grundigt).
data-overlay-theme letter (a-z) Definer dialog sidens overlap (baggrund) farve.
data-theme letter (a-z) Definer sidens hovedfarve. Standard er "c".
data-title sometext Definer sidens titel.
data-url url Dette værdi bruges til at opdatere URL'en, ikke til at anmode om en side.

Popup

Beholder med data-role="popup" egenskab.

Data egenskaber Værdi Beskrivelse
data-corners true | false Definer om pop-up-vinduet har runde hjørner.
data-overlay-theme letter (a-z) Definer pop-up-vinduets overlap (baggrund) farve. Standard er gennemsigtig baggrund (none).
data-shadow true | false Definer om pop-up-vinduet har skygge.
data-theme letter (a-z) Definer pop-up-vinduets hovedfarve. Standard er arvet, "none" sættes til gennemsigtig.
data-tolerance 30, 15, 30, 15 Definer afstanden til vindueskanten (top, right, bottom, left).

Anker med data-rel="popup" egenskab:

Data egenskaber Værdi Beskrivelse
data-position-to origin | jQuery selector | window Definer pop-up-vinduets placering. Origin - Standard. Pop-up-vinduet placeres på det link, der åbner det. jQuery selector - Pop-up-vinduet placeres på den angivne element. Window - Pop-up-vinduet placeres i midten af vindues skærm.
data-rel popup Brugt til at åbne en pop-up-vindue.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Definer hvordan der sker en overgang fra en side til den næste. Se jQuery Mobile's overgange.

Radio Button

label sammen med input med type="radio" vil automatisk blive sat til knapstil, uden brug af data-role.

Data egenskaber Værdi Beskrivelse
data-mini true | false Definer om knapperne skal være små eller af standardstørrelse.
data-role none Placer jQuery Mobile for at sætte valgknapperne til at se ud som forbedrede knapper.
data-theme letter (a-z) Definer valgknappens hovedfarve.

Bemærk:Hvis du vil kombinere flere enkeltvalgknapper, brug data-role="controlgroup" og data-type="horizontal|vertical" for at bestemme om knapperne skal kombineres horisontalt eller vertikalt.

Select

Alle <select>-elementer vil automatisk få en knapstil, og data-role er ikke nødvendig.

Data egenskaber Værdi Beskrivelse
data-icon Ikoner Reference Angiver ikonet for select-elementet. Standard er "arrow-d".
data-iconpos venstre | højre | øverst | nederst | without text Angiver ikonets placering.
data-inline true | false Angiver om select-elementet er inline.
data-mini true | false Angiver om select-elementet er lille eller standardstørrelse.
data-native-menu true | false Hvis sat til false, bruger jQuery sin egen tilpassede valgmenu (anbefales, hvis du ønsker, at valgmenuen skal have en konsistent udseende på alle mobile enheder).
data-overlay-theme letter (a-z) Angiver jQuery's tilpassede valgmenu's hovedfarve (brug sammen med data-native-menu="false").
data-placeholder true | false Kan sættes på <option>-elementer, der ikke er native select.
data-role none Placer jQuery Mobile for at sætte select-elementet til knapstil.
data-theme letter (a-z) Angiver hovedfarven for select-elementet.

Bemærk:Hvis du vil kombinere flere select-elementer, brug data-role="controlgroup" samt data-type="horizontal|vertical" for at bestemme om elementet skal kombineres vandret eller lodret.

Slider

input element med type="range" vil automatisk blive sat til knapstil, og data-role er ikke nødvendig.

Data egenskaber Værdi Beskrivelse
data-highlight true | false Angiver om glidebanen skal fremhæves.
data-mini true | false Angiver om glidebanen er lille eller standardstørrelse.
data-role none Placer jQuery Mobile for at sætte stilen på glideknapperne.
data-theme letter (a-z) Angiver hovedfarven for glidekontrollen (input, håndtag og glidebane).
data-track-theme letter (a-z) Angiver hovedfarven for glidebanen.

Text input og Textarea

input element eller textarea element med type="text|search|etc." vil automatisk få en stil sat, og data-role er ikke nødvendig.

Data egenskaber Værdi Beskrivelse
data-mini true | false Definerer om input-elementet er lille eller standardstørrelse.
data-role none Placerer jQuery Mobile, der sætter input/textarea til at se ud som en knap.
data-theme letter (a-z) Definerer temaets farve for inputfeltet.