jQuery Mobile

Introduction

  • jQuery mobile is a cross platform mobile framework.
  • It is designed to simplify and enhance the development of mobile web applications by integrating HTML5, CSS3 etc.
  • This framework is compatible with all major mobile and desktop applications including iOS, Android, Blackberry, Windows Mobile and all desktop browsers.
  • It includes not only touch events, but also the usual mouse events associated with the jQuery.

Widgets of jQuery Mobile

WidgetDescription
Button WidgetIt creates a button widget.
Checkboxradio WidgetIt creates a checkboxradio widget.
Collapsible WidgetIt creates a collapsible block of content.
Collapsibleset WidgetIt creates a set of collapsible blocks of content.
Controlgroup WidgetIt groups the buttons together.
Dialog WidgetIt opens content in an interactive overlay.
Filterable WidgetIt makes the children of an element filterable.
Flipswitch WidgetIt creates a flipswitch widget
Listview WidgetIt creates a listview widget
Loader WidgetIt handles the task of displaying the loading dialog when JQuery Mobile pulls in content via Ajax.

Methods of JQuery mobile

MethodsDescription
.buttonMarkup()It adds the button styling to an element.
.enhanceWithin()It enhances all the children of all elements in the set of matched elements.
.fieldcontain()It adds field container styling to an element.
jqmData()It stores arbitrary data associated with the specified element. It returns the value that was set.
jQuery.mobile.degradeInputsWithin()It alters the input type of form widgets.
jQuery.mobile.getInheritedTheme()It retrieves the theme of the nearest parent that has a theme assigned.
jQuery.mobile.navigate()It alters the URL and track history.
It works for browsers with and without the new history API.
jQuery.mobile.path.get()It uses utility method for determining the directory portion of an URL.
jQuery.mobile.path.parseUrl()It uses utility method for parsing a URL and its relative variants into an object that makes accessing the components of the URL easy.
jQuery.mobile.silentScroll()It scrolls to a particular Y position without triggering scroll event listeners.

Events of jQuery Mobile

JQuery Mobile offers several custom events that build upon native events to create useful hooks for development.

Following are the JQuery mobile events:

EventsDescription
hashchangeIt enables bookmarkable #hash history.
mobileinitEvent indicating that JQuery Mobile has finished loading.
navigateA wrapper event for both hashchange and popstate.
orientationchange eventDevice portrait / landscape orientation event
scrollstartIt triggers when a scroll begins.
scrollstopIt triggers when a scroll finishes.
swipeTriggered when a horizontal drag of 30px or more (and less than 30px vertically) occurs within 1 second duration.
tapTriggered after a quick, complete touch event.
tapholdTriggered after a sustained, complete touch event.
vclickVirtualized click event handler.