Show Menu

jQuery Mobile Cheat Sheet by DanielSchmitz

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

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=­“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­"­>
 

Buttons

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”­>
 

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­-ro­le=­"­sli­der­“> <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­-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>
 

Share This Cheat Sheet!

Favourited by 19 Members:

rattanak22 nn90121 gmickd Theosis zenweasel alexikia Dranzz rbatllet Vetriarmy Eric3117 tuanquynet and 9 more ...

Comments

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.