Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery Mobile with HTML5


Published on

Learn mobile and modern web development in a easy way.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

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
  11. 11. Server communication Example :- Twitter Demo
  12. 12. jQuery MobileA Framework for mobile devicesMadhur GargDate (January 2012)
  13. 13. Thank You