jQuery Mobile with HTML5
Upcoming SlideShare
Loading in...5
×
 

jQuery Mobile with HTML5

on

  • 2,179 views

Learn mobile and modern web development in a easy way.

Learn mobile and modern web development in a easy way.

Statistics

Views

Total Views
2,179
Views on SlideShare
2,179
Embed Views
0

Actions

Likes
0
Downloads
41
Comments
0

0 Embeds 0

No embeds

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

    jQuery Mobile with HTML5 jQuery Mobile with HTML5 Presentation Transcript

    • jQuery MobileA Framework for mobile devicesMadhur GargJanuary, 2012
    • 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.
    • 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
    • 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.
    • 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 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
    • 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
    • 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
    • Key Code for servercommunication  Ajax :- $.ajax({ type: "POST", data:stringtype, url: serverURL, dataType: "json“/”XML”, success: handleResult, error: function(xhr, textData, data) { alert(“Error"); }});
    • 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