or   Register or Register today to make and share your own cheat sheets! (Why Join?)

Cheatography Login

Join Us!

Not a Cheatographer? Register here!

Social Media

You can login to or register with Cheatography using your Facebook or Twitter account!

Why Join Cheatography?

Make and share cheat sheets!
Join a great community of Cheatographers and add your very own contributions.

Save your favourites!
Quick access to your most loved cheat sheets.

Fewer ads!
Members see no ads on the site.

Coming soon ...
Requests, ratings and more!

Why Join Cheatography?

Make and share cheat sheets!
Join a great community of Cheatographers and add your very own contributions.

Save your favourites!
Quick access to your most loved cheat sheets.

Fewer ads!
Members see no ads on the site.

Coming soon ...
Requests, ratings and more!

jQuery Mobile Cheat Sheet by DanielSchmitz

2 Comments   |   Add a Comment   |   PDF Download   |   Find:

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>
Pinterest

Favourited by 14 Members:

powareverb CITguy xcession Marty Rober1992 sebbu klausklein cpettit42 tuanquynet Eric3117 apurohit Vetriarmy rbatllet Dranzz

Comments

DaveChild DaveChild, 08:09 5 Apr 12

Great cheat sheet, Daniel!

Add a Comment

Comment:

Contents

jQuery Mobile: Touch-­Opt­imized Web Framework for Smartp­hones & Tablets

Column Content Comments Author Updated
- jQuery Mobile Cheat Sheet DanielSchmitz 4 Apr 12
1 Install 0 DanielSchmitz 4 Apr 12
Basic Page 0 DanielSchmitz 4 Apr 12
Linking Pages 0 DanielSchmitz 4 Apr 12
2 Buttons 0 DanielSchmitz 4 Apr 12
List View 0 DanielSchmitz 4 Apr 12
Links 0 DanielSchmitz 4 Apr 12
3 Themes 0 DanielSchmitz 4 Apr 12
Tool Bars 0 DanielSchmitz 4 Apr 12
Special Fields 0 DanielSchmitz 4 Apr 12

Cheatographer

DanielSchmitz DanielSchmitz

Cheat Sheet Stats

3,126 Downloads and 4,115 Views

Tags

css, html5, jquery, mobile, tablet, touch

Related (shares tags with):

Thumbnail