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

Like this? Share it with your network


Introduction to jQuery Mobile



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

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



Total Views
Views on SlideShare
Embed Views



27 Embeds 1,499 1428 9 7 6 6 5 4 4 3 3 3 2 2 2 2 2 1 1 1 1 1 1 1 1 1 1 1



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.

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

Introduction to jQuery Mobile Presentation Transcript

  • 1. Introduction to - Dec2012
  • 2. 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.
  • 3. 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
  • 4. jQuery Mobile Demo
  • 5. Supported Devices Apple iOS Meego Windows Phone 7 Android Tizen Symbian Blackberry Samsung Bada Palm webOS
  • 6. Customize Theme iOS Theme <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
  • 7. Customize Download Download only the code that you’re using – Minimal file size – Function code that are not used is not included
  • 8. 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="" /> <script src=""></script> <script src=""></script> </head> <body> ... </body>
  • 9. 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".
  • 10. 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>
  • 11. 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"
  • 12. 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>
  • 13. Find out more on Application Gallery