WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Mobile Data Attributes


jQuery Data Attributes

jQuery Mobile uses the HTML5 information * attribute to make a "contact benevolent" and alluring search for portable devices.

For the reference list underneath, bold value indicates the default value.


Button

Deprecated in rendition 1.4. Use CSS Classes instead. Hyperlinks with data-role="button". Catch components and connections in toolbars and input fields are consequently styled as catches, no requirement for information role="button".

Data-attribute Value Description
data-corners true | false Specifies whether the catch ought to have adjusted corners or not
data-icon Icons Reference Specifies the symbol of the catch. Default is no icon
data-iconpos left | right | top | base | notext Specifies the situation of the icon
data-iconshadow true | false Specifies whether the catch symbol ought to have shadows or not
data-inline true | false Specifies whether the catch ought to be inline or not
data-mini true | false Specifies whether the catch ought to be of little or standard size
data-shadow true | false Specifies whether the catch ought to have shadows or not
data-theme letter (a-z) Specifies the subject shade of the button


Checkbox

Pairs of names and contributions with type="checkbox".

Data-attribute Value Description
data-mini true | false Specifies whether the checkbox ought to be of little or normal size
data-role none Prevents jQuery Mobile to style checkboxes as buttons
data-theme letter (a-z) Specifies the subject shade of the checkbox


Collapsible

A header component pursued by any HTML markup inside a compartment with the data-role="collapsible".

Data-attribute Value Description
data-collapsed true | false Specifies whether the substance ought to be shut or expanded
data-crumbled signal text sometext  Specifies some content to give capable of being heard criticism to clients with screen peruser programming. Default is "click to crumple contents".
data-crumbled icon Icons Reference Specifies the symbol of the collapsible catch. Default is "plus"
data-content-theme letter (a-z) Specifies the topic shade of the collapsible substance. Will likewise include adjusted corners to the collapsible content
data-extended signal text sometext  Specifies some content to give perceptible criticism to clients with screen peruser programming. Default is "click to extend contents".
data-extended icon Icons Reference Specifies the symbol of the collapsible catch when the substance is extended. Default is "minus"
data-iconpos left | right | top | bottom Specifies the situation of the icon
data-inset true | false Specifies whether the collapsible catch ought to be styled with adjusted corners and some edge or not
data-mini true | false Specifies whether the collapsible catches ought to be of little or standard size
data-theme letter (a-z) Specifies the subject shade of the collapsible button

Collapsible Set

Collapsible substance obstructs inside a compartment with the information role="collapsibleset".

Data-attribute Value Description
data-crumbled icon Icons Reference Specifies the symbol of the collapsible catch. Default is "plus"
data-content-theme letter (a-z) Specifies the topic shade of the collapsible content
data-extended icon Icons Reference Specifies the symbol of the collapsible catch when the substance is extended. Default is "minus"
data-iconpos left | right | top | base | notext Specifies the situation of the icon
data-inset true | false Specifies whether the collapsibles ought to be styled with adjusted corners and some edge or not
data-mini true | false Specifies whether the collapsible catches ought to be of little or standard size
data-theme letter (a-z) Specifies the subject shade of the collapsible set

Content

Deprecated in form 1.4, and will be evacuated in 1.5. Container with data-role="content".

Data-attribute Value Description
data-theme letter (a-z) Specifies the subject shade of the content

Controlgroup

A <div> or <fieldset> compartment with data-role="controlgroup". Gatherings various catch styled contributions of a solitary kind (interface based catches, radio catches, checkboxes, select components). For gathering structure checkboxes and radio catches, the <fieldset> compartment is suggested inside a <div> with the "ui-fieldcontain" class, to improve name styling.

Data-attribute Value Description
data-bar invisible true | false Specifies whether to bar imperceptible kids in the task of adjusted corners
data-mini true | false Specifies whether the gathering ought to be of little or normal size
data-theme letter (a-z) Specifies the subject shade of the controlgroup
data-type horizontal | vertical Specifies whether the gathering ought to be on a level plane or vertically displayed

Dialog

A compartment with data-dialog="true".

Data-attribute Value Description
data-close-btn left | right | none Specifies the situation of the nearby button
data-close-btn-text sometext Specifies the content for the nearby button
data-corners true | false  Specifies whether the exchange ought to have adjusted corners or not
data-dom-cache true | false Specifies whether the to clear jQuery DOM store or not for individual pages (whenever set to genuine, you have to take care to deal with the DOM yourself and test completely on all portable devices)
data-overlay-theme letter (a-z) Specifies the overlay (foundation) shade of the discourse page
data-theme letter (a-z) Specifies the topic shade of the exchange page
data-title sometext Specifies the title for the discourse page

Enhancement

A holder with data-enhance="false" or data-ajax="false"

Data-attribute Value Description
data-enhance true | false If set to "true", (default) jQuery Mobile will consequently style the page, making it reasonable for cell phones. Whenever set to "false", the structure won't style the page  
data-ajax true | false Specifies whether to stack pages through ajax or not

Note: information enhance="false" must be utilized related to $.mobile.ignoreContentEnabled=true" to stop jQuery Mobile to style pages automatically.

Any connection or structure component inside information ajax="false" holders will be overlooked by the system's route usefulness when $.mobile.ignoreContentEnabled is set to true.


Field Container

Deprecated in rendition 1.4, and will be evacuated in 1.5. Use class="ui-fieldcontain instead". A compartment with data-role="fieldcontain" folded over mark/structure component pair.


Fixed Toolbar

A holder with data-role="header" or data-role="footer" together with the data-position="fixed" attribute.

Data-attribute Value Description
data-impair page-zoom true | false Specifies whether the client can scale/zoom the page or not
data-fullscreen true | false Specifies toolbars to dependably be situated at the best or potentially bottom
data-tap-toggle true | false Specifies whether the client can flip toolbar-perceivability on taps/clicks or not
data-transition slide | blur | none Specifies the change impact when a tap/click occurs
data-update-page-padding true | false Specifies the cushioning of both best and base of the page to be refreshed on resize, progress also, "updatelayout" occasions (jQuery Mobile dependably refreshes the cushioning on the "pageshow" event)
data-unmistakable on-page-show true | false Specifies toolbar-perceivability when parent page is shown

Flip Toggle Switch

An <input type="checkbox"> with an information job of "flipswitch":

Data-attribute Value Description
data-mini true | false Specifies whether the switch ought to be of little or customary size
data-on-text sometext Specifies the "on" message on the flip switch (default is "On")
data-off-text sometext Specifies the "off" message on the flip switch (default is "Off")

Footer

A compartment with data-role="footer".

Data-attribute Value Description
data-id sometext Specifies a one of a kind ID. Required for tenacious footers
data-position inline | fixed Specifies whether the footer ought to be inline with page content or remain situated at the bottom
data-fullscreen true | false Specifies whether the footer ought to dependably be situated at the base and over the page content (marginally transparent) or not
data-theme letter (a-z) Specifies the topic shade of the footer

Note: To empower the fullscreen position, use information position="fixed" and after that add the information fullscreen credit to the element.


Header

A holder with data-role="header".

Data-attribute Value Description
data-id sometext Specifies an interesting ID. Required for steady headers
data-position inline | fixed Specifies whether the header ought to be inline with page content or remain situated at the top
data-fullscreen true | false Specifies whether the header ought to dependably be situated at the best and over the page content (somewhat transparent) or not
data-theme letter (a-z) Specifies the subject shade of the header

Note: To empower the fullscreen position, use information position="fixed" and afterward add the information fullscreen credit to the element.


Inputs

Inputs with type="text|search|etc." or textarea elements.

Data-attribute Value Description
data-clear-btn true | false Specifies whether the information ought to have a "clear" button
data-clear-btn-text text Specifies a content for the "clear" catch. Default is "clear text"
data-mini true | false Specifies whether the info ought to be of little or standard size
data-role none Prevents jQuery Mobile to style inputs/textareas as buttons
data-theme letter (a-z)  Specifies the subject shade of the info field

Link

All links.

Data-attribute Value Description
data-ajax true | false Specifies whether to stack pages by means of ajax for improved client experience and advances. Whenever set to false, jQuery Mobile will complete a typical page request.
data-direction reverse Reverse progress liveliness (just for page or dialog)
data-dom-cache true | false Specifies whether the to clear jQuery DOM store or not for individual pages (whenever set to genuine, you have to take care to deal with the DOM yourself and test completely on all versatile devices)
data-prefetch true | false Specifies whether to prefetch pages into the DOM with the goal that they are accessible at the point when the client visits them
data-rel back | exchange | outside | popup Specifies a possibility for how the connection ought to carry on. Back - Moves one stage back ever. Exchange - Opens a connection as a discourse, not followed ever. Outside - For connecting to another space. Popup - opens a popup window.
data-transition fade | flip | stream | pop | slide | slidedown | slidefade | slideup | turn | none Specifies how to change starting with one page then onto the next. See our jQuery Mobile Transitions chapter.
data-position-to origin | jQuery selector | window Specifies the situation of popup boxes. Root - Default. Positions the popup over the connection that opens it. jQuery selector - positions the popup over the predetermined component. Window - positions the popup amidst the window screen.

List

An <ol> or <ul> with data-role="listview".

Data-attribute Value Description
data-autodividers true | false Specifies whether to consequently partition list things or not
data-tally theme letter (a-z) Specifies the topic shade of the check bubble
data-divider-theme letter (a-z) Specifies the topic shade of the rundown divider
data-filter true | false Specifies whether to include a pursuit enclose a rundown or not
data-channel placeholder sometext Deprecated in adaptation 1.4. Utilize the HTML placeholder characteristic. Specifies the content inside the inquiry box. Default is "Filter items..."
data-channel theme letter (a-z) Specifies the subject shade of the hunt filter
data-icon Icons Reference Specifies the symbol of the list
data-inset true | false Specifies whether the rundown ought to be styled with adjusted corners and some edge or not
data-split-icon Icons Reference Specifies the symbol of the split catch. Default is "arrow-r"
data-split-theme letter (a-z) Specifies the subject shade of the split button
data-theme letter (a-z) Specifies the subject shade of the list

List item

An <li> inside a <ol> or <ul> with data-role="listview".

Data-attribute Value Description
data-filtertext sometext Specifies a content to look for while separating components. This content will at that point be separated rather than the real rundown thing text
data-icon Icons Reference Specifies the symbol of the rundown item
data-role list-divider Specifies a divider for rundown items
data-theme letter (a-z)  Specifies the topic shade of the rundown item

Note: The information symbol quality just work on rundown things with links.


Navbar

<li> components inside a holder with data-role="navbar".

Data-attribute Value Description
data-icon Icons Reference Specifies the symbol of the rundown item
data-iconpos left | right | top | base | notext Specifies the situation of the icon


Page

A holder with data-role="page".

Data-attribute Value Description
data-dom-cache true | false Specifies whether the to clear jQuery DOM store or not for individual pages (whenever set to genuine, you have to take care to deal with the DOM yourself and test altogether on all portable devices)
data-overlay-theme letter (a-z)  Specifies the overlay (foundation) shade of exchange pages
data-theme letter (a-z)  Specifies the subject shade of the page
data-title sometext Specifies the page title
data-url url Value for refreshing the URL, rather than the url used to demand the page

Popup

A compartment with data-role="popup".

Data-attribute Value Description
data-corners true | false Specifies whether the popup ought to have adjusted corners or not
data-dismissible true | false Specifies whether the popup ought to be shut by clicking outside of the popup or not
data-history true | false Specifies whether the popup ought to make a program history thing when opened. Whenever set to false, it won't make a history thing, and will then not be closeable by means of the program's "Back" button
data-overlay-theme letter (a-z)  Specifies the overlay (foundation) shade of the popup box. Default is straightforward foundation (none).
data-shadow true | false Specifies whether the popup box ought to have shadows or not
data-theme letter (a-z)  Specifies the topic shade of the popup box. Default acquired, "none" sets the popup to transparent
data-tolerance 30, 15, 30, 15  Specifies the separation from the edges of the window (top, right, base, left)

An grapple with data-rel="popup":

Data-attribute Value Description
data-position-to origin | jQuery selector | window Specifies the situation of popup boxes. Starting point - Default. Positions the popup over the connection that opens it. jQuery selector - positions the popup over the predetermined component. Window - positions the popup amidst the window screen.
data-rel popup For opening the popup box
data-transition fade | flip | stream | pop | slide | slidedown | slidefade | slideup | turn | none Specifies how to progress starting with one page then onto the next. See our jQuery Mobile Transitions chapter.

Radio Button

Pairs of marks and contributions with type="radio".

Data-attribute Value Description
data-mini true | false Specifies whether the catch ought to be of little or standard size
data-role none Prevents jQuery Mobile to style radiobuttons as upgraded buttons
data-theme letter (a-z) Specifies the topic shade of the radio button


Select

All <select> elements.

Data-attribute Value Description
data-icon Icons Reference Specifies the symbol of the select component. Default is "arrow-d"
data-iconpos left | right | top | base | notext Specifies the situation of the icon
data-inline true | false Specifies whether the select component ought to be inline or not
data-mini true | false Specifies whether the select ought to be of little or customary size
data-local menu true | false When set to false, it utilizes jQuery's own custom select menu (suggested if you need the select menu to show the equivalent on all portable devices)
data-overlay-theme letter (a-z) Specifies the topic shade of jQuery's own custom select menu (utilized together with information local menu="false")
data-placeholder true | false Can be determined to a <option> component of a non-local select
data-role none Prevents jQuery Mobile to style select components as buttons
data-theme letter (a-z) Specifies the topic shade of the select element


Slider

Inputs with type="range".

Data-attribute Value Description
data-highlight true | false Specifies whether the slider track ought to be featured or not
data-mini true | false Specifies whether the slider ought to be of little or normal size
data-role none Prevents jQuery Mobile to style slider controls as buttons
data-theme letter (a-z)  Specifies the topic shade of the slider control (the information, handle and track)
data-track-theme letter (a-z)  Specifies the topic shade of the slider track