Cheatography
https://cheatography.com
jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
Install
Add this in <head> tag:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> |
Basic Page
<div data-role="page“>
<div data-role="header">
<h1>My Title</h1>
</div>
<div data-role="content">
<p>Hello world</p>
</div>
</div> |
Linking Pages
|
Link with Ajax <a href=“page2.html”>
|
|
Link without Ajax (Other domain) <a href=“…” rel=“external”>
|
|
Link without Ajax (Some domain) <a href=“…” data-ajax=“false”>
|
|
Link multi page in same file <a href=“#idPage”>
|
|
Back Button <a href=“#” data-rel=“back”>
|
|
Default Back Button <div data-role=“header” data-add-back-btn="true">
|
|
Link Phone Number <a href=“tel:11112222”>
|
|
Dialog Link <a href="..." data-rel="dialog">
|
|
Prefetch Pages <a href="..." data-prefetch="true">
|
|
Cached Pages <div data-role="page" data-dom-cache="true">
|
|
|
Buttons
|
Basic Button <a href="index.html" data-role="button">Link button</a>
|
|
Icon Button <a href="index.html" data-role="button" data-icon="delete">Delete</a>
|
|
Grouped Buttons <div data-role="controlgroup”>…buttons… </div>
|
List View
|
Basic List <ul data-role="listview“><li></li></ul>
|
|
List Divider <li data-role="list-divider">...</li>
|
|
Count Bubble <li>Title<span class="ui-li-count">12</span></li>
|
|
With Icon <img src="images/gf.png" alt="France" class="ui-li-icon">
|
|
Text on right side <p class="ui-li-aside"><strong>12:47</strong>PM</p>
|
|
Text Formatting Use <h3> and <p> inside <li> tag
|
|
Search Bar <ul data-role=“listview” data-filter=“true”/>
|
|
Round Corner <ul data-role=“listview” data-inset=“true”>
|
Links
|
jQm Page
|
|
Build Your Own Theme
|
|
Gallery
|
|
Resources
|
|
Documentation
|
|
|
Tool Bars
|
Header ToolBar Include links on <div data-role=“header”/>
|
|
Footer ToolBar Include links on <div data-role=“footer”/>
|
|
Back Button <div data-role=“header” data-add-back-btn="true"> … </div>
|
|
Fixed Toolbar Use position=fixed
|
Special Fields
|
Flip <select name=“flip" id=“flip" data-role="slider“> <option value="off">Off</option> <option value="on">On</option> </select>
|
|
Slider <input type="range“ id="slider" value="0" min="0" max="100" />
|
|
Select with Popup <select id="select" data-native-menu="false">
|
|
Horizontal Check/Radio <fieldset data-role="controlgroup“ data-type="horizontal“>… ..</fieldset>
|
|
Created By
Metadata
Favourited By
and 14 more ...
Comments
Great cheat sheet, Daniel!
tks
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
Related Cheat Sheets