jQuery Mobile Data Attributes

jQuery Data Attribute

Ang jQuery Mobile ay gumagamit ng HTML5 data-* attribute upang bumuo ng magandang anyo na "touch-friendly" para sa mobile devices.

Sa ibabang listahan ng pagkilala, ang mga malakas na halaga ay ang default na halaga.

Button

Hyperlink na may attribute na data-role="button". Ang buton element at link at input field sa toolbar ay awtomatikong itatakda ang estilo ng buton, walang kailangan ng data-role="button".

Data Attributes Value Description
data-corners true | false Tukuyin kung may rounded corners ang pindutan.
data-icon Mga Reference sa Icon Tukuyin ang ikon ng pindutan. Ang default ay walang ikon.
data-iconpos left | right | top | bottom | notext Tinutukoy ang posisyon ng icon.
data-iconshadow true | false Tukuyin kung may shadow ang ikon ng pindutan.
data-inline true | false Tukuyin kung ang pindutan ay inline.
data-mini true | false Tukuyin kung maliit o pangkaraniwang sukat ang pindutan.
data-shadow true | false Tukuyin kung may shadow ang pindutan.
data-theme letter (a-z) Tukuyin ang tema na kulay ng pindutan.

Mga payo:Kung gusto mong magkombinasyon ng maraming pindutan, gamitin ang konteyner na may attribute na data-role="controlgroup" at data-type="horizontal|vertical", upang tukuyin kung magiging horizontal o vertical ang magkombinasyon ng pindutan.

Checkbox

Ang label at input na may type="checkbox" ay magiging pares. Iwang set na button ang magiging estilo, walang kailangan ng data-role.

Data Attributes Value Description
data-mini true | false Tukuyin kung maliit o pangkaraniwan ang sukat ng checkbox.
data-role none Iwasan na magiging button ang checkbox ng jQuery Mobile.
data-theme letter (a-z) Tukuyin ang tema ng kulay ng checkbox.

Mga payo:Kung gusto mong kombinahin ang maraming checkbox, gamitin ang data-role="controlgroup" at data-type="horizontal|vertical" upang tukuyin kung magpakita ng horizontal o vertical ang kombinasyon ng checkbox.

Collapsible

Elementong title, na may mga HTML na markahin na nasa loob ng konteyner na may attribute na data-role="collapsible".

Data Attributes Value Description
data-collapsed true | false Tukuyin kung ang nilalaman ay dapat na isara o buksan.
data-collapsed-icon Mga Reference sa Icon Tukuyin ang icon ng foldable button. Ang default ay "plus".
data-content-theme letter (a-z) Tukuyin ang tema ng kulay ng foldable content. Gayundin, magdagdag ng rounded corner sa foldable content.
data-expanded-icon Mga Reference sa Icon Tukuyin ang icon ng foldable button kapag napalipas ang nilalaman. Ang default ay "minus".
data-iconpos left | right | top | bottom Tinutukoy ang posisyon ng icon.
data-inset true | false Tukuyin kung ang foldable button ay may estilo ng rounded corner at margin.
data-mini true | false Tukuyin kung maliit o pangkaraniwan ang sukat ng foldable button.
data-theme letter (a-z) Tukuyin ang tema ng kulay ng foldable button.

Collapsible Set

Ang foldable content block sa konteyner na may attribute na data-role="collapsible-set".

Data Attributes Value Description
data-collapsed-icon Mga Reference sa Icon Tukuyin ang icon ng foldable button. Ang default ay "plus".
data-content-theme letter (a-z) Tukuyin ang tema ng kulay ng foldable content.
data-expanded-icon Mga Reference sa Icon Tukuyin ang icon ng foldable button kapag napalipas ang nilalaman. Ang default ay "minus".
data-iconpos left | right | top | bottom | notext Tinutukoy ang posisyon ng icon.
data-inset true | false Tukuyin kung ang foldable button ay may estilo ng rounded corner at margin.
data-mini true | false Tukuyin kung maliit o pangkaraniwan ang sukat ng foldable button.
data-theme letter (a-z) Tukuyin ang tema ng kulay ng foldable set.

Content

Ang konteyner na may attribute na data-role="content".

Data Attributes Value Description
data-theme letter (a-z) Tukuyin ang tema ng kulay ng nilalaman. Ang default ay "c".

Controlgroup

Ang <div> o <fieldset> na may attribute na data-role="controlgroup". Kombinahin ang mga input na may estilong button (batay sa link na button, radio button, checkbox, choice menu).

Data Attributes Value Description
data-mini true | false Tukuyin kung maliit o pangkaraniwan ang sukat ng komposisyon.
data-type horizontal | vertical Tukuyin kung magpakita ng horizontal o vertical ang komposisyon.

Dialog

Ang konteyner na may data-role="dialog" o ang link na may data-rel="dialog".

Data Attributes Value Description
data-close-btn-text sometext Tinutukoy ang teksto ng pindutan ng pagsasara sa dialog.
data-dom-cache true | false Tinutukoy kung dapat buhayan ang jQuery DOM cache para sa isang pahina (kung naka-set sa true, dapat mag-ingat sa pamamahala ng DOM at magsagawa ng buong pagsubok sa lahat ng mobile device).
data-overlay-theme letter (a-z) Tuturuan ang overlay (background) kulay ng dialog pahina.
data-theme letter (a-z) Tinutukoy ang tema na kulay ng pahina ng pag-usap.
data-title sometext Tinutukoy ang pamagat ng pahina ng pag-usap.

Enhancement

Ang konteiner na may mga attribute na data-enhance="false" o data-ajax="false".

Data Attributes Value Description
data-enhance true | false Kung naka-set sa "true", (default) ang jQuery Mobile ay magdagdag ng estilo sa pahina upang ito ay mas gumamit sa mobile device. Kung naka-set sa "false", ang framework ay hindi mag-set ng estilo sa pahina.
data-ajax true | false Tinutukoy kung kailan ay mag-download ng pahina sa pamamagitan ng AJAX.

Komento:data-enhance="false" tulad ng gamit na $.mobile.ignoreContentEnabled=true" upang hadlangan ang jQuery Mobile na magdagdag ng estilo ng pahina.

Kapag ang $.mobile.ignoreContentEnabled ay naka-set sa true, ang anumang link o form na may attribute na data-ajax="false" sa konteiner ay ipinagwawalang-bahala ng navigasyon ng framework.

Fieldcontainer

Ang konteiner na nagbubuo ng label/form na may data-role="fieldcontain".

Fixed Toolbar

Ang konteiner na may mga attribute na data-role="header" o data-role="footer" at data-position="fixed".

Data Attributes Value Description
data-disable-page-zoom true | false Tinutukoy kung may kakayahan ang user na palakihin ang pahina.
data-fullscreen true | false Tinutukoy kung palaging nakatataas ang toolbar at o kasama ang nasa ilalim.
data-tap-toggle true | false Tinutukoy kung may kakayahan ang user na palitan ang kapansin-pansin ng toolbar sa pamamagitan ng pag-click o pag-tap.
data-transition slide | fade | none Tinutukoy ang epekto ng paglilipat sa pagkakaroon ng slide, fade o walang anumang epekto.
data-update-page-padding true | false Tinutukoy ang pag-update ng lalong-baba, sa tabi at panloob na pagpadpad ng pahina kapag nagaganap ang resize, transition at "updatelayout" na mga pangyayari (jQuery Mobile ay palaging nag-update ng panloob na pagpadpad sa oras ng pagaganap ng "pageshow" na pangyayari).
data-visible-on-page-show true | false Tinutukoy ang kasalukuyang kapansin-pansin ng toolbar sa oras ng pagpalabas ng magulang na pahina.

Flip Toggle Switch

带有 data-role="slider" 属性的一个 <select> 元素以及两个 <option> 元素。

Data Attributes Value Description
data-mini true | false 规定开关是小型的还是常规尺寸的。
data-role none 防止 jQuery Mobile 将切换开关设置为按钮样式。
data-theme letter (a-z) 规定切换开关的主题颜色。
data-track-theme letter (a-z) 规定轨道的主题颜色。

Footer

带有 data-role="footer" 属性的容器。

Data Attributes Value Description
data-id sometext 规定唯一 ID。对于 persistent footers 是必需的。
data-position inline | fixed 规定页脚与页面内容是行内关系，还是保留在底部。
data-fullscreen true | false 规定页面是否始终位于底部并覆盖页面内容 (slightly see-through)。
data-theme letter (a-z) 规定页脚的主题颜色。默认是 "a"。

Komento:如需启用 fullscreen 定位，请使用 data-position="fixed"，然后为该元素添加 data-fullscreen 属性。

Header

data-role="header" 的容器。

Data Attributes Value Description
data-id sometext 规定唯一 ID。对于 persistent headers 是必需的。
data-position inline | fixed 规定页眉与页面内容是行内关系，还是保留在顶部。
data-fullscreen true | false 规定页面是否始终位于顶部并覆盖页面内容 (slightly see-through)。
data-theme letter (a-z) 规定页眉的主题颜色。默认是 "a"。

Komento:如需启用 fullscreen 定位，请使用 data-position="fixed"，然后为该元素添加 data-fullscreen 属性。

Link

所有链接，包括 data-role="button" 的链接以及表单提交按钮。

Data Attributes Value Description
data-ajax true | false 规定是否通过 AJAX 来加载页面，以改进用户体验和过渡。如果设置为 false，则 jQuery Mobile 将进行普通的页面请求。
data-direction reverse 反转过渡动画（仅用于页面或对话）
data-dom-cache true | false Tuturuan kung mapapawalang-bisa ang jQuery DOM cache ng pahina (kung ito ay i-set sa true, mag-ingat kayo sa pangangasiwa ng DOM, at buong pagsusuri sa lahat ng mobile devices).
data-prefetch true | false 规定是否把页面预取到 DOM 中，以使其在用户访问时可用。
data-rel back | dialog | external | popup 规定有关链接如何行为的选项。 Back - 在历史记录中向后移动一步。 Dialog - 将页面作为对话来打开，不在历史中记录。 External - 链接到另一域。 opens - 打开弹出窗口。
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Tuturuan kung paano magsimula ang paglipat ng pahina mula sa isa at papunta sa isa pang pahina. Sumali sa jQuery Mobile transition.
data-position-to origin | jQuery selector | window Tuturuan ang posisyon ng popup. Origin - 默认。在打开它的链接上弹出。 jQuery selector - Magpakita sa na tinukoy na elemento. Window - Magpakita sa gitna ng window screen.

List

Ang <ol> o <ul> na may attribute na data-role="listview".

Data Attributes Value Description
data-autodividers true | false Tukuyin kung mag-automatikong paghihiwalay ang item ng listahan.
data-count-theme letter (a-z) Tukuyin ang tema ng kulay ng bubble ng bilang. Ang default ay "c".
data-divider-theme letter (a-z) Tukuyin ang tema ng kulay ng delimiter ng listahan. Ang default ay "b".
data-filter true | false Tukuyin kung magdagdag ng kahon ng paghahanap sa listahan.
data-filter-placeholder sometext Tukuyin ang teksto sa kahon ng paghahanap. Ang default ay "Filter items...".
data-filter-theme letter (a-z) Tukuyin ang tema ng kulay ng programang paghahanap. Ang default ay "c".
data-icon Mga Reference sa Icon Tukuyin ang ikon ng listahan.
data-inset true | false Tukuyin kung magdagdag ng estilo ng radya at margay sa listahan. Ang default ay "data-inset".
data-split-icon Mga Reference sa Icon Tukuyin ang ikon ng pindutin na paghihiwalay. Ang default ay "arrow-r".
data-split-theme letter (a-z) Tukuyin ang tema ng kulay ng pindutin na paghihiwalay. Ang default ay "b".
data-theme letter (a-z) Tukuyin ang tema ng kulay ng listahan.

List item

Ang <li> sa <ol> o <ul> na may attribute na data-role="listview".

Data Attributes Value Description
data-filtertext sometext Tukuyin ang teksto na hinahanap kapag nagfilter ang elemento. Ang teksto na ito, hindi ang teksto ng talahanapan ng listahan, ang gagamitin para sa paghahanap.
data-icon Mga Reference sa Icon Tukuyin ang ikon ng item ng listahan.
data-role list-divider Tukuyin ang delimiter ng item ng listahan.
data-theme letter (a-z) Tukuyin ang tema ng kulay ng item ng listahan.

Komento:Ang attribute na data-icon ay gagamitin lamang sa item ng listahan na may link.

Navbar

Ang <li> element sa loob ng container na may attribute na data-role="navbar".

Data Attributes Value Description
data-icon Mga Reference sa Icon Tukuyin ang ikon ng item ng listahan.
data-iconpos left | right | top | bottom | notext Tinutukoy ang posisyon ng icon.

Mga payo:Ang theme-swatch ay minamana ng navigation bar mula sa kanilang magulang na container. Hindi magiging posible ang pagtatakda ng attribute na data-theme sa navigation bar. Maaaring i-set ang data-theme attribute sa bawat link sa navigation bar.

Page

Container na may attribute na data-role="page".

Data Attributes Value Description
data-add-back-btn true | false Mag-automatikong idagdag ang pindutin ang pagsasama, ginagamit lamang sa header.
data-back-btn-text sometext Tukuyin ang teksto ng pindutin ang pagsasama.
data-back-btn-theme letter (a-z) Tukuyin ang tema ng kulay ng pindutin ang pagsasama.
data-close-btn-text letter (a-z) Tukuyin ang teksto ng pindutin ang pagsasara sa pag-uusap.
data-dom-cache true | false Tuturuan kung mapapawalang-bisa ang jQuery DOM cache ng pahina (kung ito ay i-set sa true, mag-ingat kayo sa pangangasiwa ng DOM, at buong pagsusuri sa lahat ng mobile devices).
data-overlay-theme letter (a-z) Tuturuan ang overlay (background) kulay ng dialog pahina.
data-theme letter (a-z) Tuturuan ang tema na kulay ng pahina. Ang default ay "c".
data-title sometext Tuturuan ang title ng pahina.
data-url url Ang halaga na ito ay ginagamit para sa pag-update ng URL, hindi para sa pag-request ng pahina.

Popup

Container na may data-role="popup" attribute.

Data Attributes Value Description
data-corners true | false Tuturuan kung may rounded corners ang popup.
data-overlay-theme letter (a-z) Tuturuan ang overlay (background) kulay ng popup. Ang default ay transparent background (none).
data-shadow true | false Tuturuan kung may shadow ang popup.
data-theme letter (a-z) Tuturuan ang tema na kulay ng popup. Ang default ay mula sa bawat bawat tema, "none" ay i-set na transparent.
data-tolerance 30, 15, 30, 15 Tuturuan ang layo mula sa gilid ng window (top, right, bottom, left).

Anchor na may data-rel="popup" attribute:

Data Attributes Value Description
data-position-to origin | jQuery selector | window Tuturuan ang posisyon ng popup. Origin - default. Ang popup ay nasa link na binuksan. jQuery selector - ang popup ay nasa itinutukoy na elemento. Window - ang popup ay nasa gitna ng window screen.
data-rel popup Ginagamit para buksan ang popup.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Tuturuan kung paano magsimula ang paglipat ng pahina mula sa isa at papunta sa isa pang pahina. Sumali sa jQuery Mobile transition.

Radio Button

Label na nakakasama sa input na may type="radio" ay awtomatikong i-set sa estilo ng button, walang kailangan ng data-role.

Data Attributes Value Description
data-mini true | false Tuturuan kung maliit o pangkaraniwang sukat ang buttons.
data-role none Ilagay ang jQuery Mobile upang i-set ang solo buttons bilang enhanced buttons na estilo.
data-theme letter (a-z) Tuturuan ang tema na kulay ng solo buttons.

Mga payo:Kung magkakasama ang ilang solo buttons, gamitin ang data-role="controlgroup" at data-type="horizontal|vertical" upang magbigay ng kung magiging horizontal o vertical ang pagkakasama ng buttons.

Select

Lahat ng <select> na elemento. Ay magiging button style, hindi kailangan ng data-role。

Data Attributes Value Description
data-icon Mga Reference sa Icon Tinutukoy ang icon ng select na elemento. Ang default ay "arrow-d".
data-iconpos left | right | top | bottom | notext Tinutukoy ang posisyon ng icon.
data-inline true | false Tinutukoy kung ang select na elemento ay magiging inline o hindi.
data-mini true | false Tinutukoy kung maliit o pangkaraniwang sukat ang select na elemento.
data-native-menu true | false Kung ito ay naka-set sa false, gamitin ang custom na pagpili ng jQuery ng jQuery (kung gusto mong ang pagpili ng menu ay magkaroon ng isang parehong anyo sa lahat ng mobile device, ito ay inirerekomenda).
data-overlay-theme letter (a-z) Tinutukoy ang tema ng kulay ng custom na pagpili ng jQuery (sa paggamit ng data-native-menu="false").
data-placeholder true | false Maaaring ilagay sa <option> na elemento ng non-native select.
data-role none Ilagay ang jQuery Mobile upang mag-set ng button ang estilo ng select na elemento.
data-theme letter (a-z) Tinutukoy ang tema ng kulay ng select na elemento.

Mga payo:Kung gusto magkakasama ang ilang select na elemento, gamitin ang data-role="controlgroup" at data-type="horizontal|vertical" upang tugisin kung ito ay magiging horizontal o vertical.

Slider

type="range" 的 input 元素。会被自动设置为按钮样式，无需 data-role。

Data Attributes Value Description
data-highlight true | false Tinutukoy kung magiging highlight o hindi ang track ng slider.
data-mini true | false Tinutukoy kung maliit o pangkaraniwang sukat ang slider.
data-role none Ilagay ang jQuery Mobile upang mag-set ng estilo ng button ang slider na pindutan.
data-theme letter (a-z) Tinutukoy ang tema ng kulay ng kontrol ng slider (input, handle at track).
data-track-theme letter (a-z) Tinutukoy ang tema ng kulay ng track ng slider.

Text input & Textarea

type="text|search|etc." 的 input 元素或 textarea 元素。会被自动设置样式，无需 data-role。

Data Attributes Value Description
data-mini true | false Tinutukoy kung ang input element ay maliit o pangkaraniwan ang laki.
data-role none Ilagay ang jQuery Mobile na nagtatakda ng estilo ng button sa input/textarea.
data-theme letter (a-z) Tinutukoy ang kulay ng tema ng input field.