jQuery MobileA Framework for mobile devicesMadhur GargJanuary, 2012
JQuery Mobile Framework-Intro A framework for developing mobile application with  minimal efforts. Framework based on jQ...
JQuery for developingFramework Framework            Mobile application for mobile  devices, supporting almost all the mob...
Basic Page Structure (with HTML5) Here to get the code  Click Click here to run the code Note :-   “data-” attributes are...
Multi Page Structure (with HTML5) Here to get the code Click Click here to run the code
Page Management in some situation. All Pages are loaded by ajax except Data attribute(data-transition) provided to apply...
Theme Support Some default themes are available. Data attribute (data-theme) is used to apply theme Below code is creat...
Eventsmaking it easy to build mobile user interfaces, As well as jQuery Mobile adds some mobile-specific events that you ...
Key Code for servercommunication       Ajax :- $.ajax({      type: "POST",      data:stringtype,      url: serverURL,   ...
Study Material http://www.jqmgallery.com/jquery-mobile-tutorials/
Server communication  Example :- Twitter Demo
jQuery MobileA Framework for mobile devicesMadhur GargDate (January 2012)
Thank You
Upcoming SlideShare
Loading in...5
×

jQuery Mobile with HTML5

1,986

Published on

Learn mobile and modern web development in a easy way.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,986
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
57
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery Mobile with HTML5

  1. 1. jQuery MobileA Framework for mobile devicesMadhur GargJanuary, 2012
  2. 2. JQuery Mobile Framework-Intro A framework for developing mobile application with minimal efforts. Framework based on jQuery and jQuery-UI  jQuery – JavaScript library with cross browser support and lots of other thing  Made web developer life easier.  jQuery-UI – JavaScript library based on jQuery and CSS. Provides some effects, interactions and widgets.  Most powerful feature is widgets.  Tinymice library is also a plug-in based on jQuery.
  3. 3. JQuery for developingFramework Framework Mobile application for mobile devices, supporting almost all the mobile platform those are having a nominal market share. Its a framework built on top of jQuery that provides a range of user interface elements and features for you to use in your mobile apps. Not only a JavaScript library but provides lots of other stuff like widgets(with the help of jQuery UI), page management, ajax support(with the help of jQuery), animation etc
  4. 4. Basic Page Structure (with HTML5) Here to get the code Click Click here to run the code Note :- “data-” attributes are a wonderful new feature of HTML5 that let you add any attributes you like to an element. All you have to do is start your attribute name with the data- prefix.
  5. 5. Multi Page Structure (with HTML5) Here to get the code Click Click here to run the code
  6. 6. Page Management in some situation. All Pages are loaded by ajax except Data attribute(data-transition) provided to apply some animation during page transition. Dialog :-  By adding data-rel="dialog" to a link, you can make the linked page appear as a dialog, with rounded corners, margins and a dark background  Internet Demo :- click here
  7. 7. Theme Support Some default themes are available. Data attribute (data-theme) is used to apply theme Below code is creating a link with a role button and applying some theme on that button  <a href="#" data-role="button" data-theme="a">About this app</a> Internet Demo :- click here
  8. 8. Eventsmaking it easy to build mobile user interfaces, As well as jQuery Mobile adds some mobile-specific events that you can use to detect actions performed on mobile devices.  For example, you can use taphold to detect if the user tapped and held their finger on an element, and swipe to detect if the user swiped horizontally from left to right (or right to left) across the element: List of some customized events  Tap  tap-and-hold  swipe, and orientation change
  9. 9. Key Code for servercommunication  Ajax :- $.ajax({ type: "POST", data:stringtype, url: serverURL, dataType: "json“/”XML”, success: handleResult, error: function(xhr, textData, data) { alert(“Error"); }});
  10. 10. Study Material http://www.jqmgallery.com/jquery-mobile-tutorials/
  11. 11. Server communication Example :- Twitter Demo
  12. 12. jQuery MobileA Framework for mobile devicesMadhur GargDate (January 2012)
  13. 13. Thank You
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×