jQuery Mobile Data- attribute reference

Data- attribute reference

The jQuery Mobile framework uses HTML5 data- attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported. To avoid naming conflicts with other plugins or frameworks that also use data- attributes, set a custom namespace by modifying the ns global option.

Button

Links with data-role="button". Input-based buttons and button elements are auto-enhanced, no data-role required

data-corners	true | false
data-icon	home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-iconpos	left | right | top | bottom | notext
data-iconshadow	true | false
data-inline	true | false
data-mini	true | false – Compact sized version
data-shadow	true | false
data-theme	swatch letter (a-z)

Multiple buttons can be wrapped in a container with a data-role="controlgroup" attribute for a vertically grouped set. Add the data-type="horizontal" attribute for the buttons to sit side-by-side.

Checkbox

Pairs of labels and inputs with type="checkbox" are auto-enhanced, no data-role required

data-mini	true | false – Compact sized version
data-role	none (prevents auto-enhancement to use native control)
data-theme	swatch letter (a-z) – Added to the form element

Collapsible

A heading and content wrapped in a container with the data-role="collapsible"

data-collapsed	true | false
data-content-theme	swatch letter (a-z)
data-iconpos	left | right | top | bottom | notext
data-mini	true | false – Compact sized version
data-theme	swatch letter (a-z)

Collapsible set

A number of collapsibles wrapped in a container with the data-role="collapsible-set"

data-content-theme	swatch letter (a-z) – Sets all collapsibles in set
data-iconpos	left | right | top | bottom | notext
data-mini	true | false – Compact sized version
data-theme	swatch letter (a-z) – Sets all collapsibles in set

Content

Container with data-role="content"

data-theme	swatch letter (a-z)

Dialog

Page with data-role="page" linked to with data-rel="dialog" on the anchor.

data-close-btn-text	string (text for the close button, dialog only)
data-dom-cache	true | false
data-overlay-theme	swatch letter (a-z) – overlay theme when the page is opened in a dialog
data-theme	swatch letter (a-z)
data-title	string (title used when page is shown)

Enhancement

Container with data-enhance="false" or data-ajax="false"

data-enhance	true | false
data-ajax	true | false

Any DOM elements inside a data-enhance="false" container, save for data-role="page|dialog" elements, will be ignored during initial enhancement and subsequent create events provided that the$.mobile.ignoreContentEnabled flag is set prior to the enhancement (eg in a mobileinit binding).

Any link or form elements inside data-enhance="false" containers will be ignored by the framework’s navigation functionality when $.mobile.ignoreContentEnabled is set to true.

Field container

Container with data-role="fieldcontain" wrapped around label/form element pair

Flip toggle switch

Select with data-role="slider", two options only

data-mini	true | false – Compact sized version
data-role	none (prevents auto-enhancement to use native control)
data-theme	swatch letter (a-z) – Added to the form element
data-track-theme	swatch letter (a-z) – Added to the form element

Footer

Container with data-role="footer"

data-id	string (unique id, useful in persistent footers)
data-position	fixed
data-fullscreen	true (used in conjunction with fixed toolbars)
data-theme	swatch letter (a-z)

Header

Container with data-role="header"

data-position	fixed
data-fullscreen	true (used in conjunction with fixed toolbars)
data-theme	swatch letter (a-z)

Link

Links, including those with a data-role="button", and form submit buttons share these attributes

data-ajax	true | false
data-direction	reverse (reverse page transition animation)
data-dom-cache	true | false
data-prefetch	true | false
data-rel	back (to move one step back in history) dialog (to open link styled as dialog, not tracked in history) external (for linking to another domain)
data-transition	slide | slideup | slidedown | pop | fade | flip

Listview

OL or UL with data-role="listview"

data-count-theme	swatch letter (a-z)
data-divider-theme	swatch letter (a-z)
data-filter	true | false
data-filter-placeholder	string
data-filter-theme	swatch letter (a-z)
data-inset	true | false
data-split-icon	home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-split-theme	swatch letter (a-z)
data-theme	swatch letter (a-z)

Listview item

LI within a listview

data-filtertext	string (filter by this value instead of inner text)
data-icon	home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-role	list-divider
data-theme	swatch letter (a-z) – can also be set on individual LIs

Navbar

A number of LIs wrapped in a container with data-role="navbar"

data-icon	home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-iconpos	left | right | top | bottom | notext
data-theme	swatch letter (a-z) – can also be set on individual LIs

Page

Container with data-role="page"

data-add-back-btn	true | false (auto add back button, header only)
data-back-btn-text	string
data-back-btn-theme	swatch letter (a-z)
data-close-btn-text	string (text for the close button, dialog only)
data-dom-cache	true | false
data-fullscreen	true (used in conjunction with fixed toolbars)Deprecated in 1.1 – use on header and footer instead.
data-overlay-theme	swatch letter (a-z) – overlay theme when the page is opened in a dialog
data-theme	swatch letter (a-z)
data-title	string (title used when page is shown)

Radio button

Pairs of labels and inputs with type="radio" are auto-enhanced, no data-role required

data-mini	true | false – Compact sized version
data-role	none (prevents auto-enhancement to use native control)
data-theme	swatch letter (a-z) – Added to the form element

Select

All select form elements are auto-enhanced, no data-role required

data-icon	home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-iconpos	left | right | top | bottom | notext
data-inline	true | false
data-mini	true | false – Compact sized version
data-native-menu	true | false
data-overlay-theme	swatch letter (a-z) – overlay theme for non-native selects
data-placeholder	true | false – Add to the Option
data-role	none (prevents auto-enhancement to use native control)
data-theme	swatch letter (a-z) – Added to the form element

Multiple selects can be wrapped in a fieldset with a data-role="controlgroup" attribute for a vertically grouped set. Add the data-type="horizontal" attribute for the selects to sit side-by-side.

Slider

Inputs with type="range" are auto-enhanced, no data-role required

data-highlight	true | false – Adds an active state fill on track to handle
data-mini	true | false – Compact sized version
data-role	none (prevents auto-enhancement to use native control)
data-theme	swatch letter (a-z) – Added to the form element
data-track-theme	swatch letter (a-z) – Added to the form element

Text input & Textarea

Input type="text|number|search|etc." or textarea elements are auto-enhanced, no data-role required

data-mini	true | false – Compact sized version
data-role	none (prevents auto-enhancement to use native control)
data-theme	swatch letter (a-z) – Added to the form element

jQuery Mobile Overview

Class Object :

– Mini element : data-mini=”true/false”
– Theme                    : data-theme=”a/b/c/d/e”
– Icon Position            : data-iconpos=”bottom/top/middle”
– Input Place holder       : placeholder=”xxx”
– Data select horizontal   : data-type=”horizontal”

Class :
– Input Accessible          : ui-hidden-accessible
– Disabled                  : ui-disabled
– Hide Label                : ui-hide-label

Toolbars
– Navbar                   : data-role=”navbar”
– Header                   : <div data-role=”header”>
– Footer                   : <div data-role=”footer”>
– Icon Position            : data-iconpos=”bottom”
– Navbar                   : <div data-role=”navbar”><ul><li></li></ul></div>
– Position Fixed           : data-position=”fixed”
– Theming Bar              : data-theme=”a”(Dark) data-theme=”b” (Blue) data-theme=”c” (Gray)

data-theme=”d” (Gray) data-theme=”f” (Yellow)
 
Button :
– Button Basics            : data-role=”button”
– Button Icons             : data-icon=”delete”
– Inline buttons           : data-inline=”true”
– Grouped buttons          : <div data-role=”controlgroup”></div>
– Theming buttons          : data-theme=”a”(Dark) data-theme=”b” (Blue) data-theme=”c” (White)
data-theme=”d” (White) data-theme=”f” (Yellow)
– Button Active              : ui-btn-active [Class]

Content Formatting
– Coloumn                         : ui-grid-a (2) ui-grid-b (3) ui-grid-c (4) ui-grid-d (5) [Class]
– Collapsible                     : <div data-role=”collapsible”> </div>
– Collapsible Box                 : <div data-role=”collapsible-set”> [Collapsible] </div>
– Collapsible Active              : data-collapsed=”false” [Class]
– Collapsible Theme Header        : <div data-role=”collapsible-set” data-theme=”c” data-content-theme=”d”>

Form
– Basic                       : <form action=”form.php” method=”post”> … </form>
– Field Containt              : <div data-role=”fieldcontain”></div>
– Textarea                    : id=”textarea-a” id=”textarea” ex: <textarea name=”textarea” id=”textarea”></textarea>
– Search                      : id=”searc-basic” ex: <input type=”search” name=”search” id=”searc-basic” value=”” />
– Slider (Range)              : <label for=”slider-0″>Input slider:</label>
<input type=”range” name=”slider” id=”slider-0″ value=”60″ min=”0″ max=”100″ />
– Flip switch                 : <select name=”slider” id=”flip-c” data-role=”slider” data-theme=”a”>
– Radio                       : <fieldset data-role=”controlgroup”>
<input type=”radio” name=”radio-choice-1″ id=”radio-choice-2″ value=”choice-2″  />
<label for=”radio-choice-2″>Dog</label>
</fieldset>

Checkboxes:
$(“input[type=’checkbox’]”).prop(“checked”,true).checkboxradio(“refresh”);

Radios:
$(“input[type=’radio’]”).prop(“checked”,true).checkboxradio(“refresh”);
Selects:
var myselect = $(“#selectfoo”);
myselect[0].selectedIndex = 3;
myselect.selectmenu(“refresh”);
Sliders:
$(“input[type=’range’]”).val(60).slider(“refresh”);
Flip switches (they use slider):
var myswitch = $(“#selectbar”);
myswitch[0].selectedIndex = 1;
myswitch.slider(“refresh”);

Page transitions
fade
pop
flip
turn
flow
slidefade
slide
slideup
slidedown
none

jQuery Mobile page structure

<html> 
	<head> 
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>jQuery Mobile: Demos and Documentation</title>
		<link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.1.0.css" />
		<link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />
		<script src="js/jquery.js"></script>
		<script src="docs/_assets/js/jqm-docs.js"></script>
		<script src="js/jquery.mobile-1.1.0.js"></script>
	</head> 
	<body> 
	<div data-role="page">
	
		<div data-role="header">
			<h1>Page Title</h1>
		</div><!-- /header -->

		<div data-role="content">	
			<p>Page content goes here.</p>		
		</div><!-- /content -->

		<div data-role="footer">
			<h4>Page Footer</h4>
		</div><!-- /footer -->
		
	</div><!-- /page -->
	</body>
</html>