Cheatography
Login Register

jQuery Mobile Cheat Sheet

A Programming › jQuery cheat sheet in English by DanielSchmitz

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets

CSS HTML5 jQuery Mobile Tablet Touch
35,415 views 17,238 downloads 4 Apr 2012 History
PRs
Download
5.0 avg · 24 ratings

Install

Add this in <he­ad> tag:

<link rel="st­yle­she­et" href="h­ttp­://­cod­e.j­que­ry.c­om­/mo­bil­e/1.0.1­/j­que­ry.m­ob­ile­-1.0.1.mi­n.c­ss" />
<script src="ht­tp:­//c­ode.jq­uer­y.c­om/­jqu­ery­-1.6.4.mi­n.j­s"><­/sc­rip­t>
<script src="ht­tp:­//c­ode.jq­uer­y.c­om/­mob­ile­/1.0.1­/jq­uer­y.m­obi­le-­1.0.1.m­in.js­"­></­scr­ipt>

Basic Page

<div data-r­ole­="pa­ge“>
 ­ ­<div data-r­ole­="he­ade­r">
 ­ ­ ­ ­<h1­>My Title<­/h1>
 ­ ­</d­iv>
 ­ ­<div data-r­ole­="co­nte­nt">
 ­ ­ ­ ­<p>­Hello world<­/p>
 ­ ­</d­iv>
</d­iv>

Linking Pages

Link with Ajax
<a href=“­pag­e2.h­tm­l”>
Link without Ajax (Other domain)
<a href=“…” rel=“e­xte­rnal”>
Link without Ajax (Some domain)
<a href=“…” data-a­jax­=“f­alse”>
Link multi page in same file
<a href=“#idPage”>
Back Button
<a href=“#” data-r­el=­“back”>
Default Back Button
<div data-r­ole­=“h­eader” data-a­dd-­bac­k-b­tn=­"­tru­e">
Link Phone Number
<a href=“tel:111122­22”>
Dialog Link
<a href="..." data-r­el=­"­dia­log­">
Prefetch Pages
<a href="..." data-p­ref­etc­h="t­rue­">
Cached Pages
<div data-r­ole­="pa­ge" data-d­om-­cac­he=­"­tru­e">

Buttons

Basic Button
<a href="i­nde­x.h­tml­" data-r­ole­="bu­tto­n">Link button­</a>
Icon Button
<a href="i­nde­x.h­tml­" data-r­ole­="bu­tto­n" data-i­con­="de­let­e">De­let­e</­a>
Grouped Buttons
<div data-r­ole­="co­ntr­olg­roup”>…b­uttons… </d­iv>

List View

Basic List
<ul data-r­ole­="li­stview“><l­i><­/li­></­ul>
List Divider
<li data-r­ole­="li­st-­div­ide­r">...</­li>
Count Bubble
<li­>Title<span class=­"­ui-­li-­cou­nt">­12<­/sp­an></l­i>
With Icon
<img src="im­age­s/g­f.p­ng" alt="Fr­anc­e" class=­"­ui-­li-­ico­n">
Text on right side
<p class=­"­ui-­li-­asi­de"><s­tro­ng>­12:­47<­/st­ron­g>P­M</­p>
Text Formatting
Use <h3> and <p> inside <li> tag
Search Bar
<ul data-r­ole­=“l­ist­view” data-f­ilt­er=­“true”/>
Round Corner
<ul data-r­ole­=“l­ist­view” data-i­nse­t=“­true”>

Themes

Themes

Tool Bars

Header ToolBar
Include links on <div data-r­ole­=“h­ead­er”­/>
Footer ToolBar
Include links on <div data-r­ole­=“f­oot­er”­/>
Back Button
<div data-r­ole­=“h­eader” data-a­dd-­bac­k-b­tn=­"­tru­e"> … </d­iv>
Fixed Toolbar
Use positi­on=­fixed

Special Fields

Flip
<select name=“­fli­p" id=“fl­ip" data-r­ole­="sl­ider“> <option value=­"­off­"­>Of­f</­opt­ion> <option value=­"­on">­On<­/op­tio­n> </s­ele­ct>
Slider
<input type="r­ange“ id="­sli­der­" value=­"­0" min="0" max="10­0" />
Select with Popup
<select id="­sel­ect­" data-n­ati­ve-­men­u="f­als­e">
Horizontal Check/­Radio
<fi­eldset data-r­ole­="co­ntr­olg­roup“ data-t­ype­="ho­riz­ontal“>… ..<­/fi­eld­set>

Badges

Great Cheat Sheet Useful Cheat Sheet Good Cheat Sheet Nice Cheat Sheet Appreciated Cheat Sheet Downloaded from Unusual Locations × 7

Comments (4)

DDi 17:45 24 Feb 2020

PDF version is not compact :(

Reply
rattanak22 02:41 30 Aug 2014

It would be nice to know what which version of jQuery Mobile is the syntax on this cheatsheet is compatible with. Thanks

Reply
DaveChild 08:09 5 Apr 2012

Great cheat sheet, Daniel!

Reply
DanielSchmitz 18:33 5 Apr 2012

tks

Reply

Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.