13
| Date post: | 28-Jan-2015 |
| Category: |
Technology |
| Upload: | ejlp12 |
| View: | 5,300 times |
| Download: | 1 times |
jQuery Mobile
Touch-Optimized Web Framework for Smartphones & Tablets
A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.
If you know basic HTML, you can start building mobile sites right away.
By using hybrid mobile application tool such as Apache Cordova/Cordova then you can create native installable mobile application.
jQuery Mobile features
Pages & Dialogs, Navigation system
Toolbars (Header & Footer bars)
Content formating (collapsible content blocks, columns layout)
Button’s (Including a set of stock icons)
Form Controls (Slider’s, Toggles, enhanced radio, checkbox, etc)
List View Control
http://jquerymobile.com
Supported Devices
Apple iOS
Android
Blackberry
Meego
Tizen
Samsung Bada
Windows Phone 7
Symbian
Palm webOS
http://jquerymobile.com/gbs/
Customize Theme
http://jquerymobile.com/themeroller/
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
iOS Theme
Customize Download
Download only the code that you’re using–Minimal file size–Function code that are not used is not included
http://jquerymobile.com/download-builder/
Getting started
Components– jQuery Core JS– jQuery Mobile JS– jQuery Mobile CSS
<!DOCTYPE html><html><head><title>Page Title</title><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /><script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head><body>...</body>
HTML5 DOCTYPE
JQuery Mobile CSS & JS
Making widht fit to the screen
data-role Attribute
An element that represent a jQuery Mobile widget is using HTML attribute data-role
Immediate children of a "page" are divs with data-roles of "header",
"content", and "footer".
<body><div data-role="page" id="main"> <div data-role="header"> <h1>My Header</h1> </div> <div data-role="content"> <p>Here is a <a href="#page2">link</a> to another page.</p> </div> <div data-role="footer"> <h4>My Footer</h4> </div></div></body>
Page navigation
Page is basically a div identified by data-role="page" and id
Link to page is using element a (anchor) with id name of page div as a value of href attribute.
Back button in the header can be automatically added by adding data-add-back-btn="true“
Another button in the header can be added using anchor tag inside header div e.g. <a href="index.html" data-icon="check">Save</a>
<body><div data-role="page" id="foo"> <div data-role="header"> <h1>First</h1> </div> <div data-role="content"> <p>I'm first Page</p> <p><a href="#bar">Link to second page</a></p> </div>
<div data-role="page" id=“bar"> <div data-role="header“ data-add-back-btn="true"> <h1>Second</h1></div> <div data-role="content"> <p>I'm second Page</p> <p><a href="#foo">Link to first page</a></p> </div></body>
Navigation bar: Navbar
Navigation bar can be in header or footer
Use ul, li and a tag
Navigation item can be text only, icon only or both
Standard icon without adding icon/image file can be use or use additional image/icon file.
Default icon position is on top. Change the position of icon relative to the text using data-
iconpos attribute e.g. data-iconpos="bottom"
To make a navigation item active use class="ui-btn-active"
<div data-role="footer"><div data-role="navbar" data-iconpos="top"><ul><li><a href="#" data-icon="home“ class="ui-btn-active">One</a></li><li><a href="#" data-icon="gear">Two</a></li><li><a href="#" data-icon="info">Three</a></li></ul></div></div>
Another Example: Listview
<body><div data-role="page" id="main"> <div data-role="header"> <h1>My Header</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" > <li><a href="#page2#">Page Two</a></li> <li><a href="newpage.html">New Page</a></li> </ul> </div> <div data-role="footer"> <h4>My Footer</h4> </div></div><body>
Find out more on
http://jquerymobile.com
Application Gallery
http://www.jqmgallery.com
