Tag: jQuery Mobile Cheat Sheet

Filterable Elements

Search for elements in a list

<form class="ui-filterable">
  <input id="myFilter" data-type="search">
</form>

<ul data-role="listview" data-filter="true" data-input="#myFilter">
  <li><a href="#">Taylor</a></li>
  <li><a href="#">John</a></li>
  <li><a href="#">Kim</a></li>
</ul>

Custom Filter

<li data-filtertext="fav"><a href="#">Taylor</a></li>

List Icons

<ul data-role="listview">
  <li><a href="#">Default is right arrow</a></li>
  <li data-icon="plus"><a href="#">data-icon="plus"</a></li>
  <li data-icon="minus"><a href="#">data-icon="minus"</a></li>
  <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
  <li data-icon="location"><a href="#">data-icon="location"</a></li>
  <li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>

16×16 Icons

<ul data-role="listview">
  <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
</ul>

List Thumbnails

For images larger than 16x16px, add an <img> element inside a list item as the first child element (with no class name). jQuery Mobile will automatically scale the image to 80x80px:

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

Use standard HTML to fill the list with information:

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
    </a>
  </li>
</ul>

Split Buttons

To create a split list with a vertical divider bar, place two links inside the <li> element.

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Some Text</a>
  </li>
</ul>

Count Bubbles

To add count bubbles, use an inline element, such as <span>, with class "ui-li-count" and add a number:

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">25</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">432</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

To create a list, apply the data-role="listview" to the <ol> or <ul> element. To make the items tappable, specify a link inside each list item (<li>):

<ol data-role="listview">
  <li><a href="#">List Item</a></li>
</ol>

<ul data-role="listview">
  <li><a href="#">List Item</a></li>
</ul>

List Dividers

<ul data-role="listview">
  <li data-role="list-divider">Europe</li>
  <li><a href="#">Norway</a></li>
  <li><a href="#">Germany</a></li>
</ul>

fade	You can make elements fade in and out of visibility.
flip	Flip the elements from back to front to the next page.
pop	You can create a popup window.
flow	Display the next page by keeping the current page away.
slide	You can slide the page from right to left.
slidefade	Slides the page from right to left and fades in the next page.
slideup	Slides the page from bottom to up.
slidedown	Slides the page from top to bottom.
turn	You can turn to the next page.
none	You cannot use any transition effect by using this attribute.

jQuery Mobile provides two different style themes, “a” and “b” – each with different colors for buttons, bars, content blocks, and so on.

<div data-role="page" data-theme="a|b">

For buttons with class=”ui-btn”, use the “ui-btn-a|b” class to style the button either gray (default) or black:

<a href="#" class="ui-btn ui-btn-a|b">Button</a>

# Theming Header and Footer

<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>

# Theming Header and Footer in Dialogs

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="header" data-theme="b"></div>
  <div data-role="footer" data-theme="b"></div>
</div

# Theming Buttons

<a href="#" class="ui-btn ui-btn-b">Black Button</a>

# Theming Icons

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>

# Theming Popups

<div data-role="popup" id="myPopup" data-theme="b">

# Theming Buttons in Header and Footer

<div data-role="header">
  <a href="#" class="ui-btn ui-btn-b">Home</a>
  <h1>Welcome To My Homepage</h1>
  <a href="#" class="ui-btn">Search/a>
</div>

<div data-role="footer">
  <a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
  <a href="#" class="ui-btn">Add Me On Twitter</a>
  <a href="#" class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>

# Theming Navigation Bars

<div data-role="footer" data-theme="b">
  <h1>Insert Footer Text Here</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
      <li><a href="#" data-icon="arrow-r">Button 2</a></li>
      <li><a href="#" data-icon="arrow-r">Button 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
    </ul>
  </div>
</div>

# Theming Panels

<div data-role="panel" id="myPanel" data-theme="b">

# Theming Collapsible Button and Content

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the expanded content.</p>
</div>

# Theming Lists

<ul data-role="listview" data-theme="b">
  <li><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
</ul>

# Theming Split Buttons

<ul data-role="listview" data-split-theme="b">

# Theming Collapsible Lists

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

# Theming Forms

<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="b">

<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

# Theming Collapsible Forms

<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>

# Global Classes

Class	Description
ui-corner-all	It displays the elements with rounded corners.
ui-shadow	It displays the shadow for the elements.
ui-overlay-shadow	It displays the overlay shadow for the elements.
ui-mini	It displays the smaller elements.

# Button Classes

Class	Description
ui-btn	It specifies that the element will be styled as a button.
ui-btn-inline	It shows the button as an inline element which saves the space as needed for the label.
ui-btn-icon-top	It places the icon above the text.
ui-btn-icon-right	It places the icon right of the text.
ui-btn-icon-bottom	It places the icon below the text.
ui-btn-icon-left	It places the icon left of the text.
ui-btn-icon-notext	It shows the only icon.
ui-btn-a|b	It displays the color of the button (“a” will be the default background color i.e. gray and “b” will change the background color to black).

# Icon Classes

Class	Description
ui-icon-action	It shows the action icon.
ui-icon-alert	It displays the exclamation mark inside a triangle.
ui-icon-arrow-d-l	It specifies down with the left arrow.
ui-icon-arrow-d-r	It specifies down with a right arrow.
ui-icon-arrow-u-l	It specifies up with the left arrow.
ui-icon-arrow-u-r	It specifies up with the right arrow.
ui-icon-arrow-l	It specifies the left arrow.
ui-icon-arrow-r	It specifies the right arrow.
ui-icon-arrow-u	It specifies the up arrow.
ui-icon-arrow-d	It specifies the down arrow.
ui-icon-bars	It shows the 3 horizontal bars one above the other.
ui-icon-bullets	It shows the 3 horizontal bullets one above the other.
ui-icon-carat-d	It displays the carat to down.
ui-icon-carat-l	It displays the carat to left.
ui-icon-carat-r	It displays the carat to right.
ui-icon-carat-u	It displays the carat to up.
ui-icon-check	It shows the checkmark icon.
ui-icon-comment	It specifies the comment or message.
ui-icon-forbidden	It displays the forbidden icon.
ui-icon-forward	It specifies the forward icon.
ui-icon-navigation	It specifies the navigation icon.
ui-icon-recycle	It displays the recycle icon.
ui-icon-refresh	It shows the refresh icon.
ui-icon-tag	It indicates the tag icon.
ui-icon-video	It indicates the video or camera icon.

# Theme Classes

Class	Description
ui-bar-(a-z)	It displays the color for bars including headers, footers, and other bars on the page.
ui-body-(a-z)	It displays the color for the content block including listview, popups, sliders, panels, loaders, etc.
ui-btn-(a-z)	It displays the color for the button.
ui-group-theme-(a-z)	It displays the color for control groups, listviews, and collapsible sets.
ui-overlay-(a-z)	It displays the background color for popup, dialog, and page containers.
ui-page-theme-(a-z)	It displays the color for pages.

# Grid Classes

Grid Class	Columns	Column Widths	Corresponds To
ui-grid-solo	1	100%	ui-block-a
ui-grid-a	2	50%/50%	ui-block-a|b
ui-grid-b	3	33%/33%/33%	ui-block-a|b|c
ui-grid-c	4	25%/25%/25%/25%	ui-block-a|b|c|d
ui-grid-d	5	20%/20%/20%/20%/20%	ui-block-a|b|c|d|e

# Button

Use the ui-btn attribute instead of using data-role = "button" attribute.

Data-attribute & Description	Value
data-corners It defines whether the button should contain rounded corners or not.	true | false
data-icon It defines the icon of the button.	Default is no icon
data-iconpos It defines the position of the icon.	left | right | top | bottom
data-iconshadow It defines whether the icon of the button should contain shadow or not.	true | false
data-inline It defines whether the button should be inline or not.	true | false
data-mini It defines whether the button should display in a smaller size or regular size.	true | false
data-shadow It defines whether the button should contain shadow or not.	true | false
data-theme It displays the theme color for the button.	letter (a-z)

# Checkbox

Following table lists the checkbox elements used with type = "checkbox".

Data-attribute & Description	Value
data-mini It defines whether the checkbox should display in a smaller size or regular size.	true | false
data-role It stops the styling of checkboxes as buttons.	none
data-theme It displays the theme color for the checkbox.	letter (a-z)

# Collapsible

Following table lists, collapsible elements used with data-role = "collapsible" attribute.

Data-attribute & Description	Value
data-collapsed It indicates whether the content should be closed or expanded.	true | false
data-collapsed-cue-text It displays feedback for users with screen reader software.	Default is collapsing content
data-collapsed-icon It defines the icon of the collapsible button.	Default icon is “plus”
data-content-theme It displays the theme color for the collapsible content.	letter (a-z)
data-expanded-cue-text It displays feedback for users with screen reader software.	Default is expanding content
data-expanded-icon It displays the collapsible button when you expand the content.	Default icon is “minus”
data-iconpos It defines the position of the icon.	left | right | top | bottom
data-inset It defines whether the collapsible button should display with rounded corners and margin or not.	true | false
data-mini It defines whether the collapsible buttons should display in a smaller size or regular size.	true | false
data-theme It displays the theme color for the collapsible button.	letter (a-z)

# Collapsible Set

Following table lists the collapsible set elements used with the data-role = "collapsibleset" attribute.

Data-attribute & Description	Value
data-collapsed-icon It defines the icon of the collapsible button.	Default icon is “plus”
data-content-theme It displays the theme color for the collapsible content.	letter (a-z)
data-expanded-icon It displays the collapsible button when you expand the content.	Default icon is “minus”
data-iconpos It defines the position of the icon.	left | right | top | bottom
data-inset It defines whether the collapsible button should display with rounded corners and margin or not.	true | false
data-mini It defines whether the collapsible buttons should display in a smaller size or regular size.	true | false
data-theme It displays the theme color for the collapsible button.	letter (a-z)

# Control group

Following table lists Controlgroup elements used with data-role = "controlgroup" attribute

Data-attribute & Description	Value
data-exclude-invisible It defines whether to exclude invisible children in the assignment of rounded corners.	true | false
data-mini It defines whether the group should display in a smaller size or regular size.	true | false
data-theme It displays the theme color for the control group.	letter (a-z)
data-type It indicates whether the group should display in a horizontal or vertical format.	horizontal | vertical

# Dialog

Following table lists dialog elements used with data-dialog="true" attribute.

Data-attribute & Description	Value
data-close-btn It defines the position of the close button.	left | right | none
data-close-btn-text It defines the text for the close button.	text
data-corners It defines whether dialog should display with rounded corners or not.	true | false
data-dom-cache It indicates whether the DOM cache must clear or not for individual pages.	true | false
data-overlay-theme It defines the overlay color of the dialog page.	letter (a-z)
data-theme It defines the theme color of the dialog page.	letter (a-z)
data-title It defines the title of the dialog page.	text

# Enhancement

Following table lists enhancement elements used with data-enhance="false" or data-ajax = "false" attribute.

Data-attribute & Description	Value
data-enhance You can style the page by setting this attribute to “true”. You cannot style the page if it is set to “false”.	true | false
data-ajax It indicates whether pages must load from Ajax or not.	true | false

# Fixed Toolbar

Following table lists the toolbar elements used with data-position = "fixed" attribute.

Data-attribute & Description	Value
data-disable-page-zoom It defines whether the user is able to scale/zoom the page or not.	true | false
data-fullscreen It defines toolbars must be positioned at the top and/or bottom.	true | false
data-tap-toggle It indicates whether the user can toggle toolbar-visibility on taps or not.	true | false
data-transition It shows a transition effect when you tap or click the element.	slide | fade | none
data-update-page-padding It updates the padding of the page by using resize, transition, and update layout events.	true | false
data-visible-on-page-show It defines toolbar-visibility when the parent page is shown.	true | false

# Flip Toggle Switch

Following table lists the flip toggle elements used with data-role = "flipswitch" attribute −

Data-attribute & Description	Value
data-mini It defines whether the switch should display in a smaller size or regular size.	true | false
data-on-text It defines the “on” text on the flip switch.	Default is “on”
data-off-text It defines the “off” text on the flip switch.	Default is “off”

# Footer

The following table lists footer elements used with data-role="footer" attribute −

Data-attribute & Description	Value
data-id It defines the unique ID.	text
data-position It defines whether the footer should be positioned at the bottom or inline with page content.	inline | fixed
data-fullscreen It defines whether the footer should be positioned at the bottom and over the page content or not.	true | false
data-theme It defines the theme color of the footer.	letter (a-z)

# Header

Following table lists the header elements used with data-role = "header" attribute.

Data-attribute & Description	Value
data-id It defines the unique ID.	text
data-position It defines whether the header should be positioned at the bottom or inline with the page content.	inline | fixed
data-fullscreen It defines whether the header should be positioned at the bottom and over the page content or not.	true | false
data-theme It defines the theme color of the header.	letter (a-z)

# Inputs

Following table lists the input elements used with type = "text|search|etc" attribute.

Data-attribute & Description	Value
data-clear-btn It defines whether the input element should contain a clear button or not.	true | false
data-clear-btn-text It defines the text for the clear button.	text
data-mini It defines whether the input should display in a smaller size or regular size.	true | false
data-role It stops styling input or text areas as buttons.	none
data-theme It defines the theme color of the input element.	letter (a-z)

# Link

Data-attribute & Description	Value
data-ajax It indicates whether the pages must be loaded through Ajax or not.	true | false
data-direction It is used for reverse transition.	reverse
data-dom-cache It indicates whether jQuery DOM cache must be clear or not for pages.	true | false
data-prefetch It is used to prefetch the pages into DOM.	true | false
data-rel It specifies the behavior of the link.	back | dialog | external | popup
data-transition It defines the transition from one page to another.	fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none
data-position-to It defines the position of the popup boxes.	origin | jQuery selector | window

# List

Following table shows the list elements used with data-role = "listview" attribute.

Data-attribute & Description	Value
data-autodividers It divides the list automatically.	true | false
data-count-theme It defines the theme color of the count element.	letter (a-z)
data-divider-theme It defines the theme color for list dividers.	letter (a-z)
data-filter It is used to filter the list values in the search box.	true | false
data-filter-placeholder It defines some text inside the search box.	text
data-filter-theme It defines the theme color for the search filter.	letter (a-z)
data-icon It provides the icon for the list.	Default is no icon
data-inset It defines whether the list should display with rounded corners and margin or not.	true | false
data-split-icon It defines the icon for the split button.	The default icon is “arrow-r”
data-split-theme It defines the theme color for the split button.	letter (a-z)
data-theme It defines the theme color for the list.	letter (a-z)

# List Item

Following table shows list item elements used with data-role = "listview" attribute.

Data-attribute & Description	Value
data-filtertext It is used to filter the list values using the text in the search box.	text
data-icon It provides the icon for the list item.	Default is no icon
data-role It defines the divider for list items.	list-divider
data-theme It defines the theme color for the list item.	letter (a-z)

# Navbar

Following table lists the navbar elements used with data-role = "navbar" attribute.

Data-attribute & Description	Value
data-icon It provides the icon for the list item.	Default is no icon
data-iconpos It defines the position for the icon.	left | right | top | bottom | notext

# Page

Following table lists the page elements used with data-role = "page" attribute.

Data-attribute & Description	Value
data-dom-cache It indicates whether the DOM cache must clear or not for individual pages.	true | false
data-overlay-theme It defines the overlay color of the dialog pages.	letter (a-z)
data-theme It defines theme color for the page.	letter (a-z)
data-title It provides the title for the page.	Default is no icon
data-url It is used to updating the URL.	url

# Popup

Following table lists the popup elements used with data-role = "popup" attribute.

Data-attribute & Description	Value
data-corners It defines whether the popup should display with rounded corners and margin or not.	true | false
data-dismissibleIt defines the whether popup should be close by clicking outside or not.	true | false
data-history It defines whether popup should display the history of item when opened.	true | false
data-overlay-theme It defines the overlay color of the popup box.	letter (a-z)
data-shadow It displays the shadow for the popup box.	true | false
data-theme It defines theme color for the popup box.	letter (a-z)
data-tolerance It defines the edges of the window.	30, 15, 30, 15

# Radio Button

Following table lists the radio button elements used with type = "radio" attribute.

Data-attribute & Description	Value
data-mini It defines whether the button should display in a smaller size or regular size.	true | false
data-role It stops the styling of radio buttons as enhanced buttons.	none
data-theme It defines the theme color for the radio button.	letter (a-z)

# Select

Data-attribute & Description	Value
data-icon It provides the icon for the select element.	Default is “arrow-d”
data-iconpos It defines the position of the icon.	left | right | top | bottom
data-inline It defines whether the button should be inline or not.	true | false
data-mini It defines whether select should display in a smaller size or regular size.	true | false
data-native-menu It use a custom menu when it has been set to false.	true | false
data-overlay-theme It defines the overlay color for the custom select menu.	letter (a-z)
data-placeholder It is used to set an option element of non-native selection.	true | false
data-role It stops the styling of select elements as buttons.	none
data-theme It displays the theme color for the select elements.	letter (a-z)

# Slider

Following table lists the slider elements used with type = "range" attribute.

Data-attribute & Description	Value
data-highlight It highlights the slider.	true | false
data-mini It defines whether the slider should display in a smaller size or regular size.	true | false
data-role It stops the styling of slider controls like buttons.	none
data-theme It displays the theme color for the slider control.	letter (a-z)
data-track-theme It displays the theme color for the slider track.	letter (a-z)