Introduction to jQuery Mobile
Upcoming SlideShare
Loading in...5
×
 

Introduction to jQuery Mobile

on

  • 5,323 views

Introduction to jQuery Mobile for developing web or hybrid mobile application.

Introduction to jQuery Mobile for developing web or hybrid mobile application.

Statistics

Views

Total Views
5,323
Views on SlideShare
4,017
Embed Views
1,306

Actions

Likes
2
Downloads
98
Comments
0

26 Embeds 1,306

http://ejlp.blogspot.com 1239
http://ejlp.blogspot.sg 9
http://ejlp.blogspot.de 7
http://ejlp.blogspot.nl 6
https://twitter.com 4
http://ejlp.blogspot.ca 4
http://ejlp.blogspot.com.br 4
http://ejlp.blogspot.in 4
http://ejlp.blogspot.co.uk 3
http://ejlp.blogspot.ru 3
http://ejlp.blogspot.it 3
http://feeds.feedburner.com 2
http://ejlp.blogspot.com.tr 2
http://ejlp.blogspot.fr 2
http://cloud.feedly.com 2
http://ejlp.blogspot.ie 2
http://ejlp.blogspot.jp 1
https://www.google.co.id 1
http://ejlp.blogspot.com.ar 1
http://ejlp.blogspot.tw 1
http://ejlp.blogspot.no 1
http://ejlp.blogspot.com.es 1
http://www.ejlp.blogspot.de 1
http://ejlp.blogspot.be 1
http://ejlp.blogspot.co.il 1
http://ejlp.blogspot.dk 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to jQuery Mobile Introduction to jQuery Mobile Presentation Transcript

    • Introduction to ejlp12@gmail.com - Dec2012
    • jQuery Mobile Touch-Optimized Web Framework for Smartphones & TabletsA 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
    • jQuery Mobile Demo http://jquerymobile.com/demos/1.2.0/
    • Supported Devices Apple iOS Meego Windows Phone 7 Android Tizen Symbian Blackberry Samsung Bada Palm webOS http://jquerymobile.com/gbs/
    • Customize Theme iOS Theme <link rel="stylesheet" href="css/themes/my-custom-theme.css" /> http://jquerymobile.com/themeroller/
    • 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 HTML5 DOCTYPE <!DOCTYPE html> <html> Making widht fit to the screen <head> <title>Page Title</title> JQuery Mobile CSS & JS <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>
    • data-role Attribute <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> 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".
    • Page navigation <body> <div data-role="page" id="foo"> <div data-role="header"> <h1>First</h1> </div> <div data-role="content"> <p>Im 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>Im second Page</p> <p><a href="#foo">Link to first page</a></p> </div> </body>  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>
    • Navigation bar: Navbar <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> 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"
    • 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 Galleryhttp://www.jqmgallery.com