jQuery Mobile Data property

Hyperlinks with data-role"button". Button elements, links in the toolbar, and input fields are automatically rendered as button styles, without adding data-role"button".

Data-attribute	value	describe
data-corners	true \| false	Specify whether the button is rounded
data-icon	ICons Reference Manual	The chart of the specified button.There is no icon by default.
data-iconpos	left \| right \| top \| bottom \| notext	Specify the location of the icon
data-iconshadow	true \| false	Specify whether the button icon has a shadow
data-inline	true \| false	Specify whether the button is inline
data-mini	true \| false	The specified button is a small size or a regular size
data-shadow	true \| false	Specify whether the button has a shadow
data-theme	letter (a-z)	Specify button topic color

	To combine multiple buttons, use a container with the data-role-"controlgroup" property and the data-type-horizontal\|vertical" to specify whether to combine buttons horizontally or vertically.

Tip: For more information about buttons, please refer to the "jQuery Mobile Buttons" section of this site!

Check box

Double pairs of labels and inputs with type -"checkbox". They are automatically rendered in a program button style, and data-role is not required.

Data-attribute	value	describe
data-mini	true \| false	Status the checkbox is a small size or a regular size
data-role	none	Prevent jQuery Mobile from rendering the check box into a button style
data-theme	letter (a-z)	Specify the topic color of the check box

	To combine multiple check boxes, use a container with the data-role"controlgroup" property and the data-type-horizontal\|vertical" to specify whether the check boxes are combined horizontally or vertically.

Collapsible blocks

A title element followed by any HTML tag inside a container with a data-role "collapsible".

Data-attribute	value	describe
data-collapsed	true \| false	The specified content is folded or expanded
data-collapsed-icon	ICons Reference Manual	Specify the icon of the foldable button.By default is "plus"
data-content-theme	letter (a-z)	Specifies the topic color of the foldable content.Whether to add rounded corners for foldable content
data-expanded-icon	ICons Reference Manual	It is specified that the icon of the button can be folded when the content is expanded.By default is "minus"
data-iconpos	left \| right \| top \| bottom	Specify the location of the icon
data-inset	true \| false	Specify whether the foldable button is rendered into a rounded corner and the outer distance
data-mini	true \| false	The folding button is small or regular size
data-theme	letter (a-z)	Specify the topic color of the foldable button

The collapsible collection

A collapsible block of content inside a container with a data-role-"collapsible-set".

Data-attribute	value	describe
data-collapsed-icon	ICons Reference Manual	Specify the icon of the foldable button.By default is "plus"
data-content-theme	letter (a-z)	Specify the topic color of the foldable button
data-expanded-icon	ICons Reference Manual	It is specified that the icon of the button can be folded when the content is expanded.By default is "minus"
data-iconpos	left \| right \| top \| bottom \| notext	Specify the location of the icon
data-inset	true \| false	Specify whether the foldable block is rendered into a rounded corner and the outer distance
data-mini	true \| false	The folding button is small or regular size
data-theme	letter (a-z)	Specify the topic color of the foldable collection

Content

Container with data-role"content".

Data-attribute	value	describe
data-theme	letter (a-z)	The topic color of the specified content.By default is "c"

Control group

Containers with data-role-"controlgroup" . C ombine inputs for multiple button styles of a single type (link-based buttons, turn buttons, check boxes, select elements). For combined form check boxes and turn buttons, it is recommended to improve the label style by using the slt;div> container within a container with a data-role"fieldcontain".

Data-attribute	value	describe
data-mini	true \| false	The specified control group is a small size or a regular size
data-type	horizontal \| vertical	The specified control group is horizontal display or vertical display

Dialog box

A container with a data-role-"dialog" or a link with a data-rel-"dialog".

Data-attribute	value	describe
data-close-btn-text	sometext	Specify the text of the dialog closes the button
data-dom-cache	true \| false	Specifies whether to clear the jQuery DOM cache of each page (if set to True, you must manage the DOM yourself and test on all mobile devices)
data-overlay-theme	letter (a-z)	Specify dialog box mask (background) color
data-theme	letter (a-z)	Specify the topic color of the dialog page
data-title	sometext	Title of the prescribed dialog page

Enhance

Containers with data-enhance"false" or data-ajax-"false".

Data-attribute	value	describe
data-enhance	true \| false	If set to "True", jQuery Mobile will automatically render the page so that it is more suitable for mobile devices.If set to "false", the frame will not render the page
data-ajax	true \| false	Specifies whether to load the page via ajax

Note: data-enhance"false" must be used with $.mobile.ignoreContentEnabled=true" to prevent jQuery Mobile from automatically rendering the page.

When $.mobile.ignoreContentEnabled is set to true, any links or form elements within the data-ajax"false" container are ignored by the framework's navigation capabilities.

The domain container

Surrounded by label/form elements around containers with data-role"fieldcontain".

Pin the toolbar

Containers with data-role"header" or data-role-"footer" and the data-position-"fixed" property.

Data-attribute	value	describe
data-disable-page-zoom	true \| false	Specifies whether the user can zoom
data-fullscreen	true \| false	Specify whether the toolbar is fixed at the top or bottom
data-tap-toggle	true \| false	Specifies whether the user can change the visibility of the toolbar by clicking
data-transition	slide \| fade \| none	Specify that the switching effect when clicked
data-update-page-padding	true \| false	Specifies whether the internal margin of the top and bottom of the page is updated when resize, transition, and "updateLayout" events (jQuery Mobile always updates the inner margin when "Pageshow" event occurs)
data-visible-on-page-show	true \| false	Specify the visibility of the toolbar when the parent page is displayed

Flip the toss switch

One element with a data-role"slider" and two elements of the "slider".

Data-attribute	value	describe
data-mini	true \| false	The prescribed switch is a small size or a regular size
data-role	none	Prevent jQuery Mobile to render the dial switch into a button style
data-theme	letter (a-z)	Specify the topic color of the switching switch
data-track-theme	letter (a-z)	Specify the theme color of the track

Tail bar

Container with data-role"footer".

Data-attribute	value	describe
data-id	sometext	The unique ID is specified.It is necessary for continuous tail columns.
data-position	inline \| fixed	The specified tail column is to remain inline or remain fixed at the bottom.
data-fullscreen	true \| false	Specifies that the tail column is fixed at the bottom or override on the page content (more than viewing)
data-theme	letter (a-z)	Specifies the topic color of the tail column.By default is "a"

Note: To enable full-screen positioning, use data-position-"fixed" and then add the data-fullscreen property to the element.

Head bar

Container with data-role"header".

Data-attribute	value	describe
data-id	sometext	The unique ID is specified.It is necessary for the continuous head bar.
data-position	inline \| fixed	The specified head bar is to remain inline or fixed at the top of the page.
data-fullscreen	true \| false	The prescribed head column is fixed on top or override on the page content (more than viewing)
data-theme	letter (a-z)	Specify the topic color of the head column.By default is "a"

Note: To enable full-screen positioning, use data-position-"fixed" and then add the data-fullscreen property to the element.

Link

All links, including those with data-role"button" and form submission buttons.

Data-attribute	value	describe
data-ajax	true \| false	Specifies whether to enhance user experience and interaction through the AJAX loading page.If set to false, jQuery Mobile will execute a normal page request.
data-direction	reverse	Reverse conversion animation (only for pages and dialogs)
data-dom-cache	true \| false	Specifies whether to clear the jQuery DOM cache of each page (if set to True, you must manage the DOM yourself and test on all mobile devices)
data-prefetch	true \| false	Specifies whether the page is read in advance to the DOM so that it is available when the user accesses them.
data-rel	back \| dialog \| external \| popup	Specify the options for link behavior.Back - Roll back to the previous page in history.Dialog - Open the link in the form of a dialog, not saved to history.EXTERNAL - is used to link to another.Popup - Opens a popup window.
data-transition	fade \| flip \| flow \| pop \| slide \| slidedown \| slidefade \| slideup \| turn \| none	It is specified that a page is switched to the next page.Please check our jQuery Mobile page switch chapter.
data-position-to	origin \| jQuery selector \| window	The position of the pop-up box is specified.Origin - default.Positioning pop-ups on the open link.jQuery Selector - Positioning pop-up on the specified element.Window - Positioning pop-up on the center of the window screen.

List

With data-role"listview" of the slt;ol> or slt;ul.gt;

Data-attribute	value	describe
data-autodividers	true \| false	Specifies whether the list item is automatically divided
data-count-theme	letter (a-z)	Specify the topic color of the counting bubble.By default is "c"
data-divider-theme	letter (a-z)	Specify the list of topics separated by lists.By default is "b"
data-filter	true \| false	Specifies whether to add a search box in the list
data-filter-placeholder	sometext	Specify the text in the search box.By default is "Filter Items ..."
data-filter-theme	letter (a-z)	Specify the topic color of the search filter.By default is "c"
data-icon	ICons Reference Manual	Target list icon
data-inset	true \| false	The specified list is rendered into a rounded corner and the outer distance
data-split-icon	ICons Reference Manual	Specify the chart of the split button.By default is "arrow-r"
data-split-theme	letter (a-z)	Specify the topic color of the segmentation button.By default is "b"
data-theme	letter (a-z)	Topic color of the list

List items

With data-role-"listview" of the .lt;ol> or .lt;ul-gt;

Data-attribute	value	describe
data-filtertext	sometext	It is specified that the text to search when filtering the elements.This text will be filtered instead of the actual list item text.
data-icon	ICons Reference Manual	Prepreted list item icon
data-role	list-divider	Specify the separation of the list item
data-theme	letter (a-z)	Topic color of the list item

Note: The data-icon property only works on list items with links.

The navigation bar

With the data-role"navbar" container inside the element of the .lt;li>

Data-attribute	value	describe
data-icon	ICons Reference Manual	Specify the icon of the list item
data-iconpos	left \| right \| top \| bottom \| notext	Specify the location of the icon

	The navigation bar inherits a sample theme from their parent container. I t is not possible to set the data-theme property for the navigation bar. You can set the data-theme property individually for each link in the navigation bar.

Page

Container with data-role"page".

Data-attribute	value	describe
data-add-back-btn	true \| false	Automatically add a back button, only header
data-back-btn-text	sometext	Status for some text of the back button
data-back-btn-theme	letter (a-z)	Regulations the theme color of the back button
data-close-btn-text	letter (a-z)	Turn off some text of the button on the prescribed dialog
data-dom-cache	true \| false	Specifies whether to clear the jQuery DOM cache of each page (if set to True, you must manage the DOM yourself and test on all mobile devices)
data-overlay-theme	letter (a-z)	Specify dialog box mask (background) color
data-theme	letter (a-z)	Specify the topic color of the page.By default is "c"
data-title	sometext	Specify page title
data-url	url	Update the value of the URL, not the URL for requesting the page

Bounce the window

Container with data-role"popup".

Data-attribute	value	describe
data-corners	true \| false	Specify whether pop-up is rounded
data-overlay-theme	letter (a-z)	Specify the mask of the pop-up box (background) color.The default is a transparent background (none)
data-shadow	true \| false	Specify whether the pop-up box has a shadow
data-theme	letter (a-z)	Specify the topic color of the pop-up box.The default is inherited, "None" setting pop-up window is transparent
data-tolerance	30, 15, 30, 15	Specify the distance of the window edge (upper top, right Right, lower Bottom, left Left)

Anchors with data-rel"popup":

Data-attribute	value	describe
data-position-to	origin \| jQuery selector \| window	> Specify the position of the pop-up box.Origin - default.Positioning pop-ups on the open link.jQuery Selector - Positioning pop-up on the specified element.Window - Positioning pop-up on the center of the window screen.
data-rel	popup	Used to open popup box
data-transition	fade \| flip \| flow \| pop \| slide \| slidedown \| slidefade \| slideup \| turn \| none	It is specified that a page is switched to the next page.Please check our jQuery Mobile page switch chapter.

The option button

Double pairs of labels and inputs with type-"radio". They are automatically rendered in a program button style, and data-role is not required.

Data-attribute	value	describe
data-mini	true \| false	The specified button is a small size or a regular size
data-role	none	Prevent the Pattern of the jQuery Mobile Rendering Single Selection button to enhance the button to make the element in HTML native state
data-theme	letter (a-z)	Specify the topic color of the radio button

	To combine multiple option buttons, use a container with the data-role-"controlgroup" property and the data-type-horizontal\|vertical" to specify whether to combine the option buttons horizontally or vertically.

Choose

All of the elements of the slt;select. These are automatically rendered as button styles, and date-role is not required.

Data-attribute	value	describe
data-icon	ICons Reference Manual	Specify the icon of the SELECT element.By default is "arrow-d"
data-iconpos	left \| right \| top \| bottom \| notext	Specify the location of the icon
data-inline	true \| false	Specify whether the SELECT element is inline
data-mini	true \| false	Status whether the SELECT element is small or regular dimensions
data-native-menu	true \| false	When set to false, it recommends such use of the custom selection menu with jQuery (if you want to make the selection menu display on all mobile devices, it is recommended)
data-overlay-theme	letter (a-z)	Specifies the topic color of the JQuery comes with the custom selection menu (used with Data-Native-Menu = "False")
data-placeholder	true \| false	可在一个非原生的选择菜单的 <option> 元素上设置
data-role	none	Prevent jQuery Mobile from rendering the SELECT element into a button style
data-theme	letter (a-z)	Specify the topic color of the SELECT element

	To combine multiple select elements, use a container with the data-role"controlgroup" property and the data-type=horizontal\|vertical" to specify whether to combine select elements horizontally or vertically.

Slide the block

The input box with type "range". These are automatically rendered as button styles, and date-role is not required.

Data-attribute	value	describe
data-highlight	true \| false	Specifies whether the sliding track highlights highlight
data-mini	true \| false	The stipulates that the sliding block is small size or a regular size
data-role	none	Prevent jQuery Mobile Rendering Sliding Block Controls for Button Style
data-theme	letter (a-z)	Specify the topic color of the sliding block control (input box, handle and track)
data-track-theme	letter (a-z)	Specify the topic color of the sliding block track

Text input boxes and text input fields

With type"text|search|etc." i nput or textarea element. These are automatically rendered as button styles, and date-role is not required.

Data-attribute	value	describe
data-mini	true \| false	Specifies that the input box is a small size or a regular size
data-role	none	Prevent jQuery Mobile from rendering the input box / input domain into a button style
data-theme	letter (a-z)	Specify the topic color of the input field

jQuery Mobile Data property

Table of contents