Show Menu

jQuery Mobile Cheat Sheet by

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
css     html5     jquery     mobile     tablet     touch


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>

Linking Pages

Link with Ajax
<a href=“­pag­e2.h­tm­l”>
Link without Ajax (Other domain)
<a href=“…” rel=­“ex­ter­nal­”>
Link without Ajax (Some domain)
<a href=“…” data­-aj­ax=­“fa­lse­”>
Link multi page in same file
<a href=“­#­idP­age­”>
Back Button
<a href=“#” data­-re­l=“­bac­k”­>
Default Back Button
<div data­-ro­le=­“he­ader” data-a­dd-­bac­k-b­tn=­"­tru­e">
Link Phone Number
<a href=“­­tel­:­11­112­222­”>
Dialog Link
<a href="..." data­-re­l="d­ial­og"­>
Prefetch Pages
<a href="..." data­-pr­efe­tch­="tr­ue"­>
Cached Pages
<div data-r­ole­="pa­ge" data­-do­m-c­ach­e="t­rue­"­>


Basic Button
<a href="i­nde­x.h­tml­" data­-ro­le=­"­but­ton­"­>Link button­</a>
Icon Button
<a href="i­nde­x.h­tml­" data­-ro­le=­"­but­ton­" data-i­con­="de­let­e"­>De­let­e</­a>
Grouped Buttons
<div data­-ro­le=­"­con­tro­lgr­oup­”­>…b­uttons… </d­iv>

List View

Basic List
<ul data­-ro­le=­"­lis­tvi­ew“­>­<li­></­li>­</u­l>
List Divider
<li data­-ro­le=­"­lis­t-d­ivi­der­"­>...<­/l­i>
Count Bubble
<li­>Ti­tle­<span class=­"­ui-­li-­cou­nt">­12<­/sp­an>­<­/li>
With Icon
<img src="im­age­s/g­f.p­ng" alt="Fr­anc­e" clas­s="u­i-l­i-i­con­"­>
Text on right side
<p clas­s="u­i-l­i-a­sid­e"­><s­tro­ng>­12:­47<­/st­ron­g>P­M</­p>
Text Formatting
Use <h3> and <p> inside <li> tag
Search Bar
<ul data­-ro­le=­“li­stview” data-f­ilt­er=­“tr­ue”­/>
Round Corner
<ul data­-ro­le=­“li­stview” data-i­nse­t=“­tru­e”­>


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

<select name=“­fli­p" id=“fl­ip" data­-ro­le=­"­sli­der­“> <option value=­"­off­"­>Of­f</­opt­ion> <option value=­"­on">­On<­/op­tio­n> </s­ele­ct>
<input type="r­ange“ id="­sli­der­" value=­"­0" min="0" max="10­0" />
Select with Popup
<select id="­sel­ect­" data­-na­tiv­e-m­enu­="fa­lse­"­>
Horizontal Check/­Radio
<fi­eldset data-r­ole­="co­ntr­olg­roup“ data­-ty­pe=­"­hor­izo­nta­l“­>… ..<­/fi­eld­set>

Download the jQuery Mobile Cheat Sheet

100 Pages

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors! is a collection of tools to make your writing better. More readabile content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!



DaveChild DaveChild, 08:09 5 Apr 12

Great cheat sheet, Daniel!

rattanak22 rattanak22, 02:41 30 Aug 14

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

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Web Programming Cheat Sheet
          Sublime Text 3 (german) Keyboard Shortcuts
          Ressources pour Bootstrap Cheat Sheet