jQuery Mobile Data ominaisuudet

jQuery Data -ominaisuudet

jQuery Mobile käyttää HTML5 data-*-ominaisuuksia luodakseen "käsittelyystä ystävällisiä" ja kauniita ulkoasuja mobiililaitteille.

Alla olevassa viittausluettelossa粗体arvot määrittelevät oletusarvon.

Button

data-role="button" -ominaisuudella varustetut hyperlinkit. Työkalurivin painikkeet, linkit ja syötekentät asetetaan automaattisesti painikkeen tyyleiksi, ei tarvita data-role="button".

Data ominaisuudet Arvo Kuvaus
data-corners true | false Määritä, onko painikkeella pyöristetyt kulmat.
data-icon Kuvakkeiden Viittaus Määritä painikkeen kuvake. Oletuksena ei ole kuvaketta.
data-iconpos vasen | oikea | ylös | alas | notext Määrittää kuvakkeen sijainnin.
data-iconshadow true | false Määritä, onko painikkeen kuvakkeella varjo.
data-inline true | false Määritä, onko painike rivin sisällä.
data-mini true | false Määritä, onko painike pienikokoinen vai tavallinen kokoinen.
data-shadow true | false Määritä, onko painikkeella varjo.
data-theme letter (a-z) Määritä painikkeen teema-colori.

Vinkki:Jos haluat yhdistää useita painikkeita, käytä konttoria, jolla on data-role="controlgroup" ja data-type="horizontal|vertical" ominaisuudet, jotta määrität, ovatko painikkeet horisontaalisessa vai vertikaalisessa yhdistelmässä.

Checkbox

label 和 type="checkbox" 的 input 是成对的。会被自动设置为按钮的样式，无需 data-role。

Data ominaisuudet Arvo Kuvaus
data-mini true | false 指定复选框是小型的还是常规尺寸的。
data-role none 防止 jQuery Mobile 将复选框设置为按钮的样式。
data-theme letter (a-z) 指定复选框的主题颜色。

Vinkki:如需组合多个复选框，请使用 "data-role="controlgroup"" 以及 "data-type="horizontal|vertical""，来指定水平还是垂直组合复选框。

Collapsible

标题元素，其后是位于具有 "data-role="collapsible"" 属性的容器中的任意 HTML 标记。

Data ominaisuudet Arvo Kuvaus
data-collapsed true | false 指定内容是否应该关闭或展开。
data-collapsed-icon Kuvakkeiden Viittaus 指定可折叠按钮的图标。默认是 "plus"。
data-content-theme letter (a-z) 指定可折叠内容的主题颜色。同时会向可折叠内容添加圆角。
data-expanded-icon Kuvakkeiden Viittaus 指定内容展开时的可折叠按钮的图标。默认是“减号”。
data-iconpos left | right | top | bottom Määrittää kuvakkeen sijainnin.
data-inset true | false 指定可折叠按钮是否具有圆角和外边距的样式。
data-mini true | false 指定可折叠按钮是小型的还是常规尺寸的。
data-theme letter (a-z) 指定可折叠按钮的主题颜色。

Collapsible Set

具有 "data-role="collapsible-set"" 属性的容器中的可折叠内容块。

Data ominaisuudet Arvo Kuvaus
data-collapsed-icon Kuvakkeiden Viittaus 指定可折叠按钮的图标。默认是“加号”。
data-content-theme letter (a-z) 指定可折叠内容的主题颜色。
data-expanded-icon Kuvakkeiden Viittaus 指定内容展开时的可折叠按钮的图标。默认是“减号”。
data-iconpos vasen | oikea | ylös | alas | notext Määrittää kuvakkeen sijainnin.
data-inset true | false 指定 collapsibles 是否具有圆角和外边距的样式。
data-mini true | false 指定可折叠按钮是小型的还是常规尺寸的。
data-theme letter (a-z) 指定可折叠集合的主题颜色。

Content

具有 "data-role="content"" 属性的容器。

Data ominaisuudet Arvo Kuvaus
data-theme letter (a-z) 指定内容的主题颜色。默认是 "c"。

Controlgroup

具有 "data-role="controlgroup"" 属性的 <div> 或 <fieldset> 容器。组合多个按钮样式的单一类型 input（基于链接的按钮、单选按钮、复选框、选择菜单）。

Data ominaisuudet Arvo Kuvaus
data-mini true | false 指定组合是小型的还是常规尺寸的。
data-type horizontal | vertical 指定组合是水平还是垂直显示。

Dialog

容器，其具有 "data-role="dialog"" 属性或链接，其具有 "data-rel="dialog"" 属性。

Data ominaisuudet Arvo Kuvaus
data-close-btn-text sometext Määritellään vain dialogin suljet napin teksti.
data-dom-cache true | false Määritellään, poistetaanko yksittäiseltä sivulta jQuery DOM-välimuisti (jos asetettu arvoksi true, on huomioitava DOM:n hallinta ja kaikki mobiililaitteet on testattava kattavasti).
data-overlay-theme letter (a-z) Määritä keskustelusivun päivitys (tausta) väri.
data-theme letter (a-z) Määritellään keskustelusivun teemaväri.
data-title sometext Määritellään keskustelusivun otsikko.

Enhancement

Kontti, jolla on data-enhance="false" tai data-ajax="false" -ominaisuudet.

Data ominaisuudet Arvo Kuvaus
data-enhance true | false Jos asetettu arvoksi "true" (oletus), jQuery Mobile lisää automaattisesti sivulle tyylejä, jotka sopivat paremmin mobiililaitteille. Jos asetettu arvoksi "false", kehyksi ei aseta sivun tyylejä.
data-ajax true | false Määritellään, ladataanko sivu AJAX:n kautta.

Huomautus:data-enhance="false", esimerkiksi yhdessä $.mobile.ignoreContentEnabled=true -asetuksen kanssa, estääkseen jQuery Mobile:n automaattisesti lisäämisen sivun tyylejä.

Kun $.mobile.ignoreContentEnabled asetetaan true, data-ajax="false" -ominaisuuden omaavien konttien kaikki linkit tai lomakkeiden elementit, jotka kuuluvat kehyksen navigointifunktioihin, jätetään huomiotta.

Fieldcontainer

Kontti, jolla on data-role="fieldcontain" -ominaisuus label/form-element-pareja.

Kiinteä työkalupalkki

Kontti, jolla on data-role="header" tai data-role="footer" -ominaisuus ja data-position="fixed" -ominaisuus.

Data ominaisuudet Arvo Kuvaus
data-disable-page-zoom true | false Määritellään, pystyykö käyttäjä skaalauttamaan sivua.
data-fullscreen true | false Määritellään, pysyykö työkalupalkki aina ylhäällä ja/tai alhaalla.
data-tap-toggle true | false Määritellään, pystyykö käyttäjä vaihtamaan työkalupalkin näkyvyyttä napsauttamalla/klikataan.
data-transition slide | fade | none Määritellään siirtymäefekti, joka tapahtuu, kun napsautetaan/klikataan.
data-update-page-padding true | false Määritellään, päivitetäänkö sivun ylä- ja alavälistyötilat tapahtuessa resize-, transition- ja "updatelayout"-tapahtumia (jQuery Mobile päivittää aina sisätilat "pageshow"-tapahtumassa).
data-visible-on-page-show true | false Määritellään, näkyvätkö työkalupalkit näytettäessä isä sivua.

Kääntö vaihtosyöttö

data-role="slider" -ominaisuudella varustettu <select>-elementti ja kaksi <option>-elementtiä.

Data ominaisuudet Arvo Kuvaus
data-mini true | false Määritä, onko kytkin pienikokoinen vai tavallinen kokoinen.
data-role none Estä jQuery Mobile asettamasta vaihtimia painikkeiden tyyliksi.
data-theme letter (a-z) Määritä vaihtimen teema väri.
data-track-theme letter (a-z) Määritä rinnan teema väri.

Alatunniste

Konteineri, jolla on data-role="footer" -ominaisuus.

Data ominaisuudet Arvo Kuvaus
data-id sometext Määritä ainutlaatuinen ID. Se on välttämätöntä pysyville alatunnisteille.
data-position Rivi | pysyvä Määritä, onko alatunnisteen ja sivun sisällön suhde rivi- tai pysytetäänkö alatunniste alhaalla.
data-fullscreen true | false Määritä, pysyykö sivu aina alhaalla ja peittää sivun sisällön (hieman läpinäkyvä).
data-theme letter (a-z) Määritä alatunnisteen teema väri. Oletus on "a".

Huomautus:Jos haluat ottaa käyttöön täydellisen näytön sijoittelun, käytä data-position="fixed" ja lisää elementille data-fullscreen-ominaisuus.

Otsikko

data-role="header" -skenen konteineri.

Data ominaisuudet Arvo Kuvaus
data-id sometext Määritä ainutlaatuinen ID. Se on välttämätöntä pysyville otsikoille.
data-position Rivi | pysyvä Määritä, onko otsikon ja sivun sisällön suhde rivi- tai pysytetäänkö otsikko ylhäällä.
data-fullscreen true | false Määritä, pysyykö sivu aina ylhäällä ja peittää sivun sisällön (hieman läpinäkyvä).
data-theme letter (a-z) Määritä otsikon teema väri. Oletus on "a".

Huomautus:Jos haluat ottaa käyttöön täydellisen näytön sijoittelun, käytä data-position="fixed" ja lisää elementille data-fullscreen-ominaisuus.

Linkki

Kaikki linkit, mukaan lukien data-role="button" -linkit ja lomakkeen lähetyspainikkeet.

Data ominaisuudet Arvo Kuvaus
data-ajax true | false Määritä, ladataanko sivu AJAX:lla parantaakseen käyttäjäkokemusta ja siirtymää. Jos asetettu arvoksi false, jQuery Mobile tekee tavallisen sivupyyntö.
data-direction reverse Käänteinen siirtymäanimaatio (vain sivuille tai keskusteluille)
data-dom-cache true | false Määritä, poistetaanko yksittäisten sivujen jQuery DOM-välimuisti (jos asetettu true, huomaa DOM:n hallinta ja testaa kaikki mobiililaitteet kattavasti).
data-prefetch true | false Määritä, tallennetaanko sivu DOM:iin etukäteen, jotta se on käytettävissä käyttäjän vieraaillessa.
data-rel Takaisin | keskustelu | ulkoinen | ponnahdusikkuna Määritä vaihtoehdot, miten linkit käyttäytyvät. Takaisin - siirtyy yksi askel taaksepäin historialle. Keskustelu - avaa sivun keskusteluna, ei tallenneta historiaan. Ulkoinen - linkki toiseen verkkotunnukseen. Avaa - avaa ponnahdusikkunan.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Määritä, miten sivu siirtyy seuraavalle. Katso jQuery Mobile -siirtymät.
data-position-to origin | jQuery selector | window Määritä ponnahdusikkunan sijainti. Alkuperä - oletus. Avaa linkin linkittäessäsi. jQuery selector - popping up on the specified element. Ikkuna - popping up in the middle of the window screen.

Luettelo

data-role="listview" -ominaisuudella varustettu <ol> tai <ul>.

Data ominaisuudet Arvo Kuvaus
data-autodividers true | false Määritä, jaetaanko luettelo kohteet automaattisesti.
data-count-theme letter (a-z) Määritä laskutus kuplan teema väri. Oletus on "c".
data-divider-theme letter (a-z) Määritä luettelon erotin elementin teema väri. Oletus on "b".
data-filter true | false Määritä, lisätäänkö hakupalkki luetteloon.
data-filter-placeholder sometext Määritä hakupalkin teksti. Oletus on "Filter items...".
data-filter-theme letter (a-z) Määritä hakualgoritmin teema väri. Oletus on "c".
data-icon Kuvakkeiden Viittaus Määritä luettelon ikoni.
data-inset true | false Määritä, lisätäänkö luetteloon pyöristettyjä reunuksia ja marginaaleja.
data-split-icon Kuvakkeiden Viittaus Määritä erotuspainikkeen ikoni. Oletus on "arrow-r".
data-split-theme letter (a-z) Määritä erotuspainikkeen teema väri. Oletus on "b".
data-theme letter (a-z) Määritä luettelon teema väri.

Luettelo kohta

data-role="listview" -ominaisuudella varustetussa <ol> tai <ul> -elementissä oleva <li>.

Data ominaisuudet Arvo Kuvaus
data-filtertext sometext Määritä haku elementissä haettava teksti. Tämä teksti, ei oikea luettelon kohteen teksti, tulee haettavaksi.
data-icon Kuvakkeiden Viittaus Määritä luettelon kohteen ikoni.
data-role list-divider Määritä luettelon kohteen erotin.
data-theme letter (a-z) Määritä luettelon kohteen teema väri.

Huomautus:data-icon ominaisuus soveltuu vain linkkejä sisältäville luettelon kohteille.

Navigaatiopalkki

data-role="navbar" -ominaisuudella varustetun kontin sisällä oleva <li> -elementti.

Data ominaisuudet Arvo Kuvaus
data-icon Kuvakkeiden Viittaus Määritä luettelon kohteen ikoni.
data-iconpos vasen | oikea | ylös | alas | notext Määrittää kuvakkeen sijainnin.

Vinkki:Navigaatiopalkki perii theme-swatch isäkontiltaan. Navigaatiopalkin data-theme ominaisuuden asettaminen ei ole mahdollista. Data-theme ominaisuus voidaan asettaa erikseen navigaatiopalkin jokaiselle linkille.

Sivu

data-role="page" -ominaisuudella varustettu kontti.

Data ominaisuudet Arvo Kuvaus
data-add-back-btn true | false Lisää automaattisesti takaisin-painike, käytetään vain otsikkopalkissa.
data-back-btn-text sometext Määritä takaisin-painikkeen teksti.
data-back-btn-theme letter (a-z) Määritä takaisin-painikkeen teema väri.
data-close-btn-text letter (a-z) Määritä dialogin sulkemispainikkeen teksti.
data-dom-cache true | false Määritä, poistetaanko yksittäisten sivujen jQuery DOM-välimuisti (jos asetettu true, huomaa DOM:n hallinta ja testaa kaikki mobiililaitteet kattavasti).
data-overlay-theme letter (a-z) Määritä keskustelusivun päivitys (tausta) väri.
data-theme letter (a-z) Määritä sivun teema väri. Oletus on "c".
data-title sometext Määritä sivun otsikko.
data-url url Arvoa käytetään URL:n päivittämiseen, ei sivun pyytämiseen.

Popup

容器, jolla on data-role="popup" -ominaisuus.

Data ominaisuudet Arvo Kuvaus
data-corners true | false Määritä, onko ponnahdusikkunalla kulmien pyöristäminen.
data-overlay-theme letter (a-z) Määritä ponnahdusikkunan päivitys (tausta) väri. Oletus on läpinäkyvä tausta (none).
data-shadow true | false Määritä, onko ponnahdusikkunalla varjo.
data-theme letter (a-z) Määritä ponnahdusikkunan teema väri. Oletus on perintä, "none" asettaa läpinäkyväksi.
data-tolerance 30, 15, 30, 15 Määritä etäisyys ikkunan reunasta (top, right, bottom, left).

Ankkuri, jolla on data-rel="popup" -ominaisuus:

Data ominaisuudet Arvo Kuvaus
data-position-to origin | jQuery selector | window Määritä ponnahdusikkunan sijainti. Origin - oletus. Ponnahdusikkuna sijaitsee avataessaan sitä. jQuery selector - ponnahdusikkuna sijaitsee määritetyn elementin päällä. Window - ponnahdusikkuna sijaitsee ikkunan keskipisteessä.
data-rel popup Käytetään avattavien ponnahdusikkunoiden avaamiseen.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Määritä, miten sivu siirtyy seuraavalle. Katso jQuery Mobile -siirtymät.

Radio Button

label ja type="radio" -syötteenä oleva input yhdistetään automaattisesti napputyyliin, ilman data-role.

Data ominaisuudet Arvo Kuvaus
data-mini true | false Määritä, ovatko napit pieniä vai tavallisia koossa.
data-role none Aseta jQuery Mobile -yleisessä nappeja varten laajennettu napputyyli.
data-theme letter (a-z) Määritä valintanappulan teema väri.

Vinkki:Jos haluat yhdistää useita valintanappuloita, käytä data-role="controlgroup" ja data-type="horizontal|vertical" määrittääksesi, miten napit yhdistetään horisontaalisesti tai vertikaalisesti.

Valinta

Kaikki <select>-elementit. Asetetaan automaattisesti painiketyyli, ei tarvita date-role.

Data ominaisuudet Arvo Kuvaus
data-icon Kuvakkeiden Viittaus Määrittää select-elementin kuvakkeen. Oletus on "arrow-d".
data-iconpos vasen | oikea | ylös | alas | notext Määrittää kuvakkeen sijainnin.
data-inline true | false Määrittää, onko select-elementti rivin sisällä.
data-mini true | false Määrittää, onko select-elementti pienikokoinen vai tavallinen kokoinen.
data-native-menu true | false Jos asetetaan arvoksi false, käytetään jQuery:n omaa mukautettua valintamenua (jos haluat, että valintamenulla on yhtenäinen ulkoasu kaikilla mobiililaitteilla, suositellaan tämän käytön).
data-overlay-theme letter (a-z) Määrittää jQuery:n mukautetun valintamenun teemavärin ( käytetään yhdessä data-native-menu="false" -arvon kanssa).
data-placeholder true | false voidaan asettaa ei-alkuperäiselle select-elementille <option>.
data-role none Asettaa jQuery Mobile:n select-elementin painiketyylin.
data-theme letter (a-z) Määrittää select-elementin teemavärin.

Vinkki:Jos haluat yhdistää useita select-elementtejä, käytä data-role="controlgroup" ja data-type="horizontal|vertical" määrittääksesi, yhdistetäänkö elementti horisontaalisesti vai vertikaalisesti.

Aaltorata

Elementti, jolla on arvo "range". Asetetaan automaattisesti painiketyyli, ei tarvita data-role.

Data ominaisuudet Arvo Kuvaus
data-highlight true | false Määrittää, näytetäänkö aaltorata korostettuna.
data-mini true | false Määrittää, onko aaltorata pienikokoinen vai tavallinen kokoinen.
data-role none Asettaa jQuery Mobile:n aaltorastin asetuspainikkeen tyylin.
data-theme letter (a-z) Määrittää aaltorastin (input, handle ja track) teemavärin.
data-track-theme letter (a-z) Määrittää aaltoradan teemavärin.

Tekstisyöttö ja Tekstikenttä

Elementti, jolla on arvo "text|search|etc." tai elementti, jolla on tyypi "textarea". Tyylejä asetetaan automaattisesti, ei tarvita data-role.

Data ominaisuudet Arvo Kuvaus
data-mini true | false Määritetään, onko input-elementti pieni vai tavallinen kokoinen.
data-role none Asetetaan jQuery Mobile input/textarea -elementtien painikkeiden tyyli.
data-theme letter (a-z) Määritetään syötteen kentän teeman väri.