jQuery Mobile

Rumman Ansari   Software Engineer   2023-03-23   166 Share
☰ Table of Contents

Table of Content:

jQuery Mobile - Introduction

jQuery Mobile is a framework for creating a mobile based web applications that are touch optimized. This is built on top of jQuery library. Hence it is easy to use and involves less scripting.

  • It supports all the mobile platforms and all popular browsers.

  • It is compatible with popular frameworks like phonegap.

  • Same source code can be used for both desktop and mobile platforms.

To include jQuery mobile library, include CDN of .js file of jQuery, jQueryMobile, .css file and also use meta tag to get a better rendering of pages in all devices.

CSS Framework

Classes in jQuery Mobile

The style sheet that jQuery Mobile offers allows you to access big pool of custom classes.

There are four types of classes in jQuery mobile

  • Widget specific classes

Example: ui-collapsible-inset - this will make the widget margin and corner rounded.

  • Button specific classes

Example: ui-btn-inline - this will display the button inline.

  • Icon specific classes

Example: ui-btn-icon-left - this will make the text appear next to the icon.

  • Theme specific classes

Example: ui-page-theme-[a-z] - this will set the color theme for page.

Themes and Icons

Themes

jQuery mobile allows you to select a theme from the built in themes or create your own theme using theme roller. It contains two sets of swatches. (button, content and toolbar color)

Usage: <div data-role="page" data-theme="a|b">

Note that all the content of a page in jQuery mobile should be enclosed within data-role="page".

Icons

You can access all the custom icons for buttons and lists available in jQuery mobile. They can be accessed by adding class ui-icon to element.

Take a look at the icons available: jQuery mobile - icons

jQuery Mobile - Events

jQuery Mobile has set of events that are optimized for touch responses. Event handling process is same as jQuery.

Let us see some events and their usage:

  • swipe()- is triggered when a swipe action occurs for more than 30px in horizontal direction.

Usage:


$( selector ).on( "swipe", HandlerFunction );
  • tap()- is fired after a quick touch on the screen.

Usage:


$( selector ).on( "tap", HandlerFunction );
  • pageload() - triggered after a page loads completely.
jQuery Mobile- Methods

Lets see some basic methods available in jQuery mobile.

buttonMarkup(): Used in adding custom style on top of default styles to a button.

Usage:


$( "selector" ).buttonMarkup({ attribute: value });

silentScroll(): Used to scroll vertically up to a particular pixel with out triggering an event handler.

Usage:


$.mobile.silentScroll(100)
Widgets - jQuery mobile

Let us see some mobile specific widgets available in jQuery mobile.

Button Widget

This can be added as a normal html element. jQuery identifies it based on type(i.e. submit, reset, etc) and enhance it with features.

You can also explicitly use the widget : $( "selector" ).button();

Similarly, for checkbox and radio buttons, based on the type, widget gets added automatically.

Select menu Widget

This widget helps in creating dropdown with jQuery mobile framework. Create a dropdown with normal select tags and options. jQuery will identify all select element and enhance it with features.

List of all widgets available: jQuery mobile - widgets

‹ Previous not possible this is first one.
‹ Next