Show Menu
Cheatography
  1. Home >
  2. Programming >

jQuery Mobile Cheat Sheet by

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

Links

 

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>
                   
 

Metadata

  • Languages:
  • Published: 4th April, 2012
  • Last Updated: 13th May, 2016
  • Rated: 5 stars based on 20 ratings

Favourited By

eGoddess moalex thegitfather rattanak22 nn90121 gmickd Theosis zenweasel Dranzz rbatllet Vetriarmy
and 11 more ...

Comments

Great cheat sheet, Daniel!

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

PDF version is not compact :(

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
          Ressources pour Bootstrap Cheat Sheet
          Sublime Text 3 (german) Keyboard Shortcuts