YouTip

with data-role="fieldcontain" to improve label styling. | Data-Attribute | Value | Description | | --- | --- | --- | | data-mini | true | **false** | Specifies whether the controlgroup is mini or regular size | | data-type | horizontal | **vertical** | Specifies whether the controlgroup is displayed horizontally or vertically | * * * ## Dialog A container with data-role="dialog" or a link with data-rel="dialog". | Data-Attribute | Value | Description | | --- | --- | --- | | data-close-btn-text | _sometext_ | Specifies the text for the dialog close button | | data-dom-cache | true | **false** | Specifies whether to clear the jQuery DOM cache for each page (if set to true, you must manage the DOM yourself and test on all mobile devices) | | data-overlay-theme | _letter_ (a-z) | Specifies the overlay (background) color for the dialog page | | data-theme | _letter_ (a-z) | Specifies the theme color for the dialog page | | data-title | _sometext_ | Specifies the title for the dialog page | * * * ## Enhance A container with data-enhance="false" or data-ajax="false". | Data-Attribute | Value | Description | | --- | --- | --- | | data-enhance | **true**| false | If set to "true" (default), jQuery Mobile will automatically render the page to make it more suitable for mobile devices. If set to "false", the framework will not render the page | | data-ajax | **true**| false | Specifies whether to load pages 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 inside a data-ajax="false" container will be ignored by the framework's navigation functionality. * * * ## Fieldcontain Deprecated after version 1.4, no longer supported after version 1.5, will be replaced by class="ui-fieldcontain". A container wrapping a label/form element pair with data-role="fieldcontain". * * * ## Fixed Toolbar A container with data-role="header" or data-role="footer", and the data-position="fixed" attribute. | Data-Attribute | Value | Description | | --- | --- | --- | | data-disable-page-zoom | **true** | false | Specifies whether the user can zoom the page | | data-fullscreen | true | **false** | Specifies whether the toolbar is always fixed at the top or bottom | | data-tap-toggle | **true** | false | Specifies whether the user can change the toolbar's visibility by tapping | | data-transition | **slide** | fade | none | Specifies the transition effect when a tap occurs | | data-update-page-padding | **true** | false | Specifies whether the page's top and bottom padding is updated during resize, transition, and "updatelayout" events (jQuery Mobile always updates padding on the "pageshow" event) | | data-visible-on-page-show | **true** | false | Specifies the toolbar's visibility when the parent page is shown | * * * ## Flip Toggle Switch A element with data-role="slider" and two elements. | Data-Attribute | Value | Description | | --- | --- | --- | | data-mini | true | **false** | Specifies whether the switch is mini or regular size | | data-role | none | Prevents jQuery Mobile from rendering the flip toggle switch as a button | | data-theme | _letter_ (a-z) | Specifies the theme color for the flip toggle switch | | data-track-theme | _letter_ (a-z) | Specifies the theme color for the track | * * * ## Footer A container with data-role="footer". | Data-Attribute | Value | Description | | --- | --- | --- | | data-id | _sometext_ | Specifies a unique ID. Required for persistent footers | | data-position | **inline** | fixed | Specifies whether the footer is inline with the page content or fixed at the bottom | | data-fullscreen | true | **false** | Specifies whether the footer is fixed at the bottom or overlays the page content (for a larger viewing area) | | data-theme | _letter_ (a-z) | Specifies the theme color for the footer. Default is "a" | **Note:** To enable fullscreen positioning, use data-position="fixed" and then add the data-fullscreen attribute to the element. * * * ## Header A container with data-role="header". | Data-Attribute | Value | Description | | --- | --- | --- | | data-id | _sometext_ | Specifies a unique ID. Required for persistent headers | | data-position | **inline** | fixed | Specifies whether the header is inline with the page content or fixed at the top | | data-fullscreen | true | **false** | Specifies whether the header is fixed at the top or overlays the page content (for a larger viewing area) | | data-theme | _letter_ (a-z) | Specifies the theme color for the header. Default is "a" | **Note:** To enable fullscreen positioning, use data-position="fixed" and then add the data-fullscreen attribute to the element. * * * ## Links All links, including those with data-role="button" and form submit buttons. | Data-Attribute | Value | Description | | --- | --- | --- | | data-ajax | **true** | false | Specifies whether to load pages via ajax to improve user experience and interaction. If set to false, jQuery Mobile will perform a normal page request. | | data-direction | reverse | Reverses the transition animation (only for pages and dialogs) | | data-dom-cache | true | **false** | Specifies whether to clear the jQuery DOM cache for each page (if set to true, you must manage the DOM yourself and test on all mobile devices) | | data-prefetch | true | **false** | Specifies whether to prefetch pages into the DOM so they are available when the user visits them | | data-rel | back | dialog | external | popup | Specifies options for link behavior. Back - Go back to the previous page in history. Dialog - Opens the link as a dialog, not saved to history. External - Used for linking to another domain. Popup - Opens a popup window. | | data-transition | **fade** | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Specifies the effect when transitioning from one page to the next. See our (#) section. | | data-position-to | **origin** | jQuery selector | window | Specifies the position of the popup. Origin - Default. Positions the popup over the link that opened it. jQuery selector - Positions the popup over the specified element. Window - Positions the popup in the center of the window screen. | * * * ## Listview An

or
with data-role="listview". | Data-Attribute | Value | Description | | --- | --- | --- | | data-autodividers | true | **false** | Specifies whether to automatically divide list items | | data-count-theme | _letter_ (a-z) | Specifies the theme color for the count bubble. | | data-divider-theme | _letter_ (a-z) | Specifies the theme color for list dividers. | | data-filter | true | **false** | Specifies whether to add a search box to the list | | data-filter-placeholder | _sometext_ | Deprecated after version 1.4. Use the HTML placeholder attribute instead. Specifies the text inside the search box. Default is "Filter items..." | | data-filter-theme | _letter_ (a-z) | Specifies the theme color for the search filter. | | data-icon | (#) | Specifies the icon for the list | | data-inset | true | **false** | Specifies whether the list is rendered with rounded corners and margin | | data-split-icon | (#) | Specifies the icon for the split button. Default is "arrow-r" | | data-split-theme | _letter_ (a-z) | Specifies the theme color for the split button. | | data-theme | _letter_ (a-z) | Specifies the theme color for the list | * * * ## List Item An
• inside an
  or
  with data-role="listview". | Data-Attribute | Value | Description | | --- | --- | --- | | data-filtertext | _sometext_ | Specifies the text to search for when filtering elements. This text will be filtered instead of the actual list item text | | data-icon | (#) | Specifies the icon for the list item | | data-role | list-divider | Specifies a divider for the list item | | data-theme | _letter_ (a-z) | Specifies the theme color for the list item | **Note:** The data-icon attribute only works on list items with links. * * * ## Navbar
  • elements inside a container with data-role="navbar". | Data-Attribute | Value | Description | | --- | --- | --- | | data-icon | (#) | Specifies the icon for the list item | | data-iconpos | left | right | **top** | bottom | notext | Specifies the position of the icon | |  | Navbar inherits the theme swatch from their parent container. It is not possible to set the data-theme attribute for the navbar. You can set the data-theme attribute for each link in the navbar individually. | | --- | * * * ## Page A container with data-role="page". | Data-Attribute | Value | Description | | --- | --- | --- | | data-add-back-btn | true | **false** | Automatically adds a back button, only for headers | | data-back-btn-text | _sometext_ | Specifies some text for the back button | | data-back-btn-theme | _letter_ (a-z) | Specifies the theme color for the back button | | data-close-btn-text | _letter_ (a-z) | Specifies some text for the close button on dialogs | | data-dom-cache | true | **false** | Specifies whether to clear the jQuery DOM cache for each page (if set to true, you must manage the DOM yourself and test on all mobile devices) | | data-overlay-theme | _letter_ (a-z) | Specifies the overlay (background) color for the dialog page | | data-theme | _letter_ (a-z) | Specifies the theme color for the page. | | data-title | _sometext_ | Specifies the page title | | data-url | url | Updates the value of the URL, not the URL used to request the page | * * * ## Popup A container with data-role="popup". | Data-Attribute | Value | Description | | --- | --- | --- | | data-corners | **true** | false | Specifies whether the popup has rounded corners | | data-overlay-theme | _letter_ (a-z) | Specifies the overlay (background) color for the popup. Default is transparent background (none) | | data-shadow | **true** | false | Specifies whether the popup has a shadow | | data-theme | _letter_ (a-z) | Specifies the theme color for the popup. Default is inherited, "none" makes the popup transparent | | data-tolerance | 30, 15, 30, 15 | Specifies the distance from the window edges (top, right, bottom, left) | Anchor with data-rel="popup": | Data-Attribute | Value | Description | | --- | --- | --- | | data-position-to | **origin** | jQuery selector | window | >Specifies the position of the popup. Origin - Default. Positions the popup over the link that opened it. jQuery selector - Positions the popup over the specified element. Window - Positions the popup in the center of the window screen. | | data-rel | popup | Used to open the popup | | data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | **none** | Specifies the effect when transitioning from one page to the next. See our (#) section. | * * * ## Radio Button Paired label and input elements with type="radio". They are automatically rendered as buttons; data-role is not required. | Data-Attribute | Value | Description | | --- | --- | --- | | data-mini | true | **false** | Specifies whether the button is mini or regular size | | data-role | none | Prevents jQuery Mobile from rendering the radio button in an enhanced button state, making the element display in its native HTML state | | data-theme | _letter_ (a-z) | Specifies the theme color for the radio button | |  | To group multiple radio buttons, use a container with the data-role="controlgroup" attribute and data-type="horizontal|vertical" to specify whether radio buttons are grouped horizontally or vertically. | | --- | * * * ## Select All elements. These are automatically rendered as buttons; data-role is not required. | Data-Attribute | Value | Description | | --- | --- | --- | | data-icon | (#) | Specifies the icon for the select element. Default is "arrow-d" | | data-iconpos | left | **right** | top | bottom | notext | Specifies the position of the icon | | data-inline | true | **false** | Specifies whether the select element is inline | | data-mini | true | **false** | Specifies whether the select element is mini or regular size | | data-native-menu | **true** | false | When set to false, it uses jQuery's custom select menu (recommended if you want the select menu to look the same on all mobile devices) | | data-overlay-theme | _letter_ (a-z) | Specifies the theme color for jQuery's custom select menu (used with data-native-menu="false") | | data-placeholder | true | **false** | Can be set on an element in a non-native select menu | | data-role | none | Prevents jQuery Mobile from rendering the select element as a button | | data-theme | _letter_ (a-z) | Specifies the theme color for the select element | |  | To group multiple select elements, use a container with the data-role="controlgroup" attribute and data-type="horizontal|vertical" to specify whether select elements are grouped horizontally or vertically. | | --- | * * * ## Slider An input with type="range". These are automatically rendered as buttons; data-role is not required. | Data-Attribute | Value | Description | | --- | --- | --- | | data-highlight | true | **false** | Specifies whether the slider track is highlighted | | data-mini | true | **false** | Specifies whether the slider is mini or regular size | | data-role | none | Prevents jQuery Mobile from rendering the slider control as a button | | data-theme | _letter_ (a-z) | Specifies the theme color for the slider control (input, handle, and track) | | data-track-theme | _letter_ (a-z) | Specifies the theme color for the slider track | * * * ## Text Input & Textarea An input with type="text|search|etc."