jQuery Mobile with HTML5

jQuery Mobile with HTML5

• 1.
  jQuery Mobile A Frameworkfor mobile devices Madhur Garg January, 2012
• 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.
  JQuery for developingFramework Framework Mobile application for mobile devices, supporting almost all the mobile platform those are having a nominal market share.  It's 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.
  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.
  Multi Page Structure(with HTML5 ) Here to get the code Click Click here to run the code
• 6.
  Page Management insome 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.
  Theme Support  Somedefault 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.
  Eventsmaking it easyto 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.
  Key Code forserver communication  Ajax :-  $.ajax({ type: "POST", data:stringtype, url: serverURL, dataType: "json“/”XML”, success: handleResult, error: function(xhr, textData, data) { alert(“Error"); } });
• 10.
  Study Material  http://www.jqmgallery.com/jquery-mobile-tutorials/
• 11.
  Server communication Example :- Twitter Demo
• 12.
  jQuery Mobile A Frameworkfor mobile devices Madhur Garg Date (January 2012)
• 13.
  Thank You