Cheatography
https://cheatography.com
jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
InstallAdd 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 PagesLink 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"> |
| | ButtonsBasic 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 ViewBasic 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”> |
LinksjQm Page | Build Your Own Theme | Gallery | Resources | Documentation |
| |
Tool BarsHeader 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 FieldsFlip <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 13 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