Advertisement

jQuery Mobile Data Properties

jQuery Data Properties

jQuery Mobile using HTML5 data- * Create a "touch-friendly" aesthetic appearance properties for mobile devices.

In the following reference list, bold value specified defaults.

Button

Hyperlink with data-role = "button" of. Button elements and links as well as the input field toolbar is automatically set the button style, without data-role = "button".

Property Data value description
data-corners true | false Whether the predetermined button has rounded corners.
data-icon Icons Reference Predetermined button icon. The default is no icon.
data-iconpos left | right | top | bottom | notext A predetermined position of the icon.
data-iconshadow true | false Predetermined button icon is shaded.
data-inline true | false Whether the button is within a predetermined row.
data-mini true | false Provisions buttons are small or regular size.
data-shadow true | false Provisions button is shaded.
data-theme letter (az) Provisions relating to the color of the button.

Tip: If you need a combination of a plurality of buttons, use = "controlgroup" as well as data-type = with data-role "horizontal | vertical" container attributes to specify horizontal or vertical combinations of buttons.

Checkbox

label and type = "checkbox" in the input are paired. It is automatically set to the style of the button, no data-role.

Property Data value description
data-mini true | false Checkbox in small or regular size.
data-role none JQuery Mobile will prevent Setting a checkbox button styles.
data-theme letter (az) Provisions relating to the color box.

Tip: To combine multiple check boxes, use the data-role = "controlgroup" as well as data-type = "horizontal | vertical ", to specify horizontal or vertical combination box.

Collapsible

Title element, followed located data-role = "collapsible" container attribute to any HTML tag with.

Property Data value description
data-collapsed true | false Whether the provisions of the content should be closed or expanded.
data-collapsed-icon Icons Reference Foldable predetermined button icon. The default is "plus".
data-content-theme letter (az) Provisions relating to color foldable content. It will also add rounded corners to the collapsible content.
data-expanded-icon Icons Reference Collapsible icon buttons are expanded when a predetermined content. The default is "minus."
data-iconpos left | right | top | bottom A predetermined position of the icon.
data-inset true | false Provisions collapsible button is rounded and has a margin of styles.
data-mini true | false Provisions foldable buttons are small or regular size.
data-theme letter (az) Provisions relating to color foldable button.

Collapsible Set

Container with data-role = "collapsible-set" property in the collapsible content block.

Property Data value description
data-collapsed-icon Icons Reference Foldable predetermined button icon. The default is "plus."
data-content-theme letter (az) Provisions relating to color foldable content.
data-expanded-icon Icons Reference Collapsible icon buttons are expanded when a predetermined content. The default is "minus."
data-iconpos left | right | top | bottom | notext A predetermined position of the icon.
data-inset true | false Provisions collapsibles whether it has rounded corners and margins of style.
data-mini true | false Provisions foldable buttons are small or regular size.
data-theme letter (az) Provisions relating to color foldable collection.

Content

With data-role = "content" container property.

Property Data value description
data-theme letter (az) Provisions relating to color content. The default is "c".

Controlgroup

With data-role = "controlgroup" attribute of the <div> or <fieldset> container. Combining multiple button style of a single type of input (based on the linked buttons, radio buttons, check boxes, select the menu).

Property Data value description
data-mini true | false Grouped small or regular size.
data-type horizontal | vertical Predetermined combination of horizontal or vertical display.

Dialog

data-role = "dialog" container or data-rel = "dialog" link.

Property Data value description
data-close-btn-text sometext Only provides for the dialog close button text.
data-dom-cache true | false Whether defined as individual pages jQuery DOM Clear Cache (if set true, you need to pay attention to the management of the DOM, and fully tested on all mobile devices).
data-overlay-theme letter (az) Provisions superimposed dialogue page (background) colors.
data-theme letter (az) Provisions relating to color talk page.
data-title sometext The provisions of the title page of dialogue.

Enhancement

With data-enhance = "false" or data-ajax = "false" attribute of the container.

Property Data value description
data-enhance true | false If set to "true" ,, (default) jQuery Mobile will automatically add style to the page, making it more suitable for mobile devices. If set to "false", the framework does not set the style pages.
data-ajax true | false Specifies whether to load the page via AJAX.

Note: data-enhance = "false" such as joint $ .mobile.ignoreContentEnabled = true "to use to prevent jQuery Mobile automatically add page style.

When $ .mobile.ignoreContentEnabled set to true, data-ajax = "false" container of any links or form elements, it will be ignored navigation framework.

Fieldcontainer

Packaging label / form elements on the data-role = "fieldcontain" containers.

Fixed Toolbar

With data-role = "header" or data-role = "footer" attribute and data-position = "fixed" container property.

Property Data value description
data-disable-page-zoom true | false Provisions if the user has the ability to scale the page.
data-fullscreen true | false Provisions toolbar is always located at the top and / or bottom.
data-tap-toggle true | false Whether the user has the ability to provision by clicking / tapping to toggle the visibility of the toolbar.
data-transition slide | fade | none When a predetermined tap / click the transition effect occurs.
data-update-page-padding true | false When a predetermined update resize, transition and "updatelayout" events occurring within the upper and lower margins of the page (jQuery Mobile is always within the margins when updating "pageshow" event)
data-visible-on-page-show true | false When displaying the parent page specified toolbar visibility.

Flip Toggle Switch

A <select> element with the data-role = "slider" attribute and two <option> element.

Property Data value description
data-mini true | false Predetermined switch is a small or regular size.
data-role none JQuery Mobile will switch to prevent the switch to button style.
data-theme letter (az) Predetermined switching theme colors switch.
data-track-theme letter (az) Provisions relating to the color of the track.

Footer

Container data-role = "footer" with the attribute.

Property Data value description
data-id sometext It specifies a unique ID. For persistent footers are required.
data-position inline | fixed Provisions footers and page content is in-line relationship, or remain in the bottom.
data-fullscreen true | false Predetermined page is always at the bottom of the cover and page content (slightly see-through).
data-theme letter (az) Provisions footer theme colors. The default is "a".

NOTE: To enable fullscreen targeting, use the data-position = "fixed", and then add the data-fullscreen attribute to that element.

Header

data-role = "header" of the container.

Property Data value description
data-id sometext It specifies a unique ID. For persistent headers is required.
data-position inline | fixed Provisions header and page content is in-line relationship, or keep on top.
data-fullscreen true | false Predetermined page is always at the top of the cover and page content (slightly see-through).
data-theme letter (az) Provisions relating to the color of the header. The default is "a".

NOTE: To enable fullscreen targeting, use the data-position = "fixed", and then add the data-fullscreen attribute to that element.

Link

All links, including links to data-role = "button" and the form submit button.

Property Data value description
data-ajax true | false Specifies whether to load the page via AJAX, to improve the user experience and transition. If set to false, jQuery Mobile will be a normal page requests.
data-direction reverse Reverse transition animation (only for page or dialog)
data-dom-cache true | false JQuery DOM specifies whether to clear the cache for individual pages (if set to true, then you need to pay attention to the DOM management, and fully tested on all mobile devices).
data-prefetch true | false Specifies whether to prefetch pages to DOM, to make it available when users visit.
data-rel back | dialog | external | popup Option is specified about how to link behavior. Back - move one step backward in history. Dialog - pages as open dialogue, not history records. External - linked to another domain. opens - opens pop-up window.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Specify how the transition from one to the next. JQuery Mobile to participate in the transition.
data-position-to origin | jQuery selector | window Provisions of the pop-up position. Origin - default. Pop open its links. jQuery selector - pop up on the specified element. Window - window pops up in the middle of the screen.

List

With data-role = "listview" attribute of <ol> or <ul>.

Property Data value description
data-autodividers true | false Are the provisions of automatic-separated list of items.
data-count-theme letter (az) Predetermined count bubble theme colors. The default is "c".
data-divider-theme letter (az) Predetermined list separator theme color. The default is "b".
data-filter true | false Specifies whether to add a search box in the list.
data-filter-placeholder sometext The provisions of the text in the search box. The default is "Filter items ...".
data-filter-theme letter (az) Provisions relating to the color filter of the search. The default is "c".
data-icon Icons Reference Provision icon list.
data-inset true | false Whether defined as a list of add rounded corners and margin styles.
data-split-icon Icons Reference Predetermined division button icon. The default is "arrow-r".
data-split-theme letter (az) Provisions relating to color-coded buttons. The default is "b".
data-theme letter (az) Provisions relating to the color list.

List item

With data-role = "listview" attribute of <ol> or <ul> the <li>.

Property Data value description
data-filtertext sometext Specified search text when the filter element. The text of the list item instead of the actual text will be searched.
data-icon Icons Reference Provision icon list item.
data-role list-divider Delimiter specified list item.
data-theme letter (az) Provisions relating to the color of a list item.

Note: data-icon attribute only applies to list items containing links.

Navbar

Inside the container with the data-role = "navbar" attribute of the <li> element.

Property Data value description
data-icon Icons Reference Provision icon list item.
data-iconpos left | right | top | bottom | notext A predetermined position of the icon.

Tip: navigation theme-swatch inherited from its parent container. Navigation bar to set data-theme attribute is not feasible. You can be individually set data-theme attribute to each link in the navbar.

Page

data-role = "page" property with a container.

Property Data value description
data-add-back-btn true | false Automatically add back button, only for the header.
data-back-btn-text sometext The text of the provisions of the Back button.
data-back-btn-theme letter (az) Provisions relating to the color of the back button.
data-close-btn-text letter (az) The provisions of the text of the Close button on the dialog.
data-dom-cache true | false JQuery DOM specifies whether to clear the cache for individual pages (if set to true, then you need to pay attention to the DOM management, and fully tested on all mobile devices).
data-overlay-theme letter (az) Provisions superimposed dialogue page (background) colors.
data-theme letter (az) Provisions relating to the color of the page. The default is "c".
data-title sometext The provisions of the title page.
data-url url This value is used to update the URL, and not for the requested page.

Popup

Container data-role = "popup" with the attribute.

Property Data value description
data-corners true | false Are there provisions pop-up box rounded.
data-overlay-theme letter (az) Superimposing a predetermined pop-up box (background) colors. The default background is transparent (none).
data-shadow true | false Are there provisions pop-up box shadows.
data-theme letter (az) Provisions relating to the color pop-up box. The default is inherited, "none" is set to be transparent.
data-tolerance 30, 15, 30, 15 Predetermined distance from the edge of the window (top, right, bottom, left) distance.

With data-rel = "popup" anchor attribute:

Property Data value description
data-position-to origin | jQuery selector | window Provisions of the pop-up position. Origin - default. Pop-up box is located on the link to open it. jQuery selector - the pop-up box is located on the specified element. Window - pop-up window in the center of the screen.
data-rel popup To open a pop-up box.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Specify how the transition from one to the next. JQuery Mobile to participate in the transition.

Radio Button

label and type = "radio" the input pair. It will be automatically set to the button style, without data-role.

Property Data value description
data-mini true | false Provisions button is small or regular size.
data-role none Place jQuery Mobile Set the radio button to enhanced buttons styles.
data-theme letter (az) Provisions relating to the color of the radio button.

Tip: If you need a combination of a plurality of radio buttons, use the data-role = "controlgroup" as well as data-type = "horizontal | vertical " button to specify the level or composition vertically.

Select

All <select> element. It will automatically set the button style, without date-role.

Property Data value description
data-icon Icons Reference Provisions icons select elements. The default is "arrow-d".
data-iconpos left | right | top | bottom | notext A predetermined position of the icon.
data-inline true | false Are the provisions of select elements within the line.
data-mini true | false Provision select element is small or regular size.
data-native-menu true | false If set to false, then use your own custom jQuery selection menu (if you want to select the menu has a consistent look and feel across all mobile devices, is recommended).
data-overlay-theme letter (az) Provisions jQuery (for use with data-native-menu = "false") self-defined color theme selection menu.
data-placeholder true | false May be provided on a non-native select the <option> element.
data-role none Place jQuery Mobile will select element to the button style.
data-theme letter (az) Provisions relating to the color of select elements.

Tip: To select a combination of multiple elements, use data-role = "controlgroup" as well as data-type = "horizontal | vertical " to specify the level of the element or combination vertically.

Slider

type = "range" of the input element. It will be automatically set to the button style, without data-role.

Property Data value description
data-highlight true | false Specifies whether to highlight the slider track.
data-mini true | false Provisions of the slider is small or regular size.
data-role none JQuery Mobile will place the slider to set the button style.
data-theme letter (az) Provisions slider control (input, handle and track) theme color.
data-track-theme letter (az) Provisions relating to the color of the slider track.

Text input & Textarea

type = "text | search |. etc" of the input element or textarea element. Is automatically set style, no data-role.

Property Data value description
data-mini true | false It specifies whether input element is small or regular size.
data-role none JQuery Mobile will place the input / textarea asked to set the button style.
data-theme letter (az) Enter a subject specified color field.