jQuery Mobile - Quick Guide

jQuery Mobile - Overview

JQuery Mobile is a user interface framework, which is built on jQuery Core and used for developing responsive websites or applications that are accessible on mobile, tablet, and desktop devices. It uses the features of both jQuery and jQuery UI to provide API features for mobile web applications.

It was developed by the jQuery project team in the year 2010 and written in JavaScript.

Why Use jQuery Mobile?

• It creates web applications that it will work the same way on the mobile, tablet, and desktop devices.

• It is compatible with other frameworks such as PhoneGap, Whitelight, etc.

• It provides a set of touch-friendly form inputs and UI widgets.

• The progressive enhancement brings a unique functionality to all mobile, tablet, and desktop platforms and adds efficient page loads and wider device support.

Features of jQuery Mobile

• It is built on jQuery Core and "write less, do more" UI framework.

• It is an open source framework, and cross-platform as well as cross-browser compatible.

• It is written in JavaScript and uses features of both jQuery and jQuery UI for building mobile-friendly sites.

• It integrates HTML5, CCS3, jQuery and jQuery UI into one framework for creating pages with minimal scripting.

• It includes Ajax navigation system that uses animated page transitions.

Advantages of jQuery Mobile

• It is easy to learn and develop applications if you have knowledge of HTML5, CSS3 features.

• It is cross-platform and cross-browser compatible so you don't have to worry about writing different code for each device resolution.

• You can create the custom theme using ThemeRoller without writing the line of code. It supports all HTML5 browsers.

• It uses HTML5 along with JavaScript for easy development of web applications.

• It is built in a way that allows the same code to automatically scale from the mobile screen to desktop screen.

Disadvantages of jQuery Mobile

• There are limited options for CSS themes, so sites can look similar which are built by these themes.

• Applications which are developed using jQuery Mobile are slower on mobiles.

• It becomes more time consuming when you combine jQuery mobile with other mobile frameworks.

• Difficult to provide complete customized visual design.

• All the features in a device cannot be accessed by JavaScript in a browser.

jQuery Mobile - Setup

In this chapter, we will discuss how to install and set up jQuery Mobile.

Download jQuery Mobile

When you open the link jquerymobile.com/, you will see there are two options to download jQuery mobile library.

• Custom Download − Click this button to download a customized version of library.

• Latest Stable − Click this button to get the stable and latest version of jQuery mobile library.

Custom Download with Download Builder

Using Download Builder, you can create a custom build including only the portions of the library that you need. When you download this new customized version of jQuery Mobile, you will see the following screen.

You can select the libraries according to your need and click the Build My Download button.

Stable download

Click the Stable button, which leads directly to a ZIP file containing the CSS and JQuery files, for the latest version of jQuery mobile library. Extract the ZIP file contents to a jQuery mobile directory.

This version contains all files including all dependencies, a large collection of demos, and even the library's unit test suite. This version is helpful to getting started.

Download jQuery Library from CDNs

A CDN (Content Delivery Network) is a network of servers designed to serve files to the users. If you use a CDN link in your webpage, it moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if a visitor to your webpage has already downloaded a copy of jQuery mobile from the same CDN, it won't have to be re-downloaded. You can include the following CDN files into the HTML document.

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

We are using the CDN versions of the library throughout this tutorial. We use AMPPS (AMPPS is a WAMP, MAMP and LAMP stack of Apache, MySQL, MongoDB, PHP, Perl & Python) server to execute all our examples.

Example

Following is a simple example of jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to Howcodex</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

Details of the above code are −

• This code is specified inside the head element.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

• The viewport is used to specify (by the browser) to display the page zoom level and dimension.

• content = "width = device-width" is used to set the pixel width of the page or screen device.

• initial-scale = 1 sets the initial zoom level, when the page is loaded for the first time.

• Include the following CDNs

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

• Content inside the <body> tag is a page displayed in the browser.

<div data-role = "page">
   ...
</div>

• data-role = "header" creates the header at the top of the page.

• data-role = "main" is used to define the content of the page.

• data-role = "footer" creates the footer at the bottom of the page.

• class = "ui-content" includes padding and margin inside the page content.

Output

Let's carry out the following steps to see how the above code works −

• Save the above html code as simple_example.html file in your server root folder.

• Open this HTML file as http://localhost/simple_example.html and the following output will be displayed.

jQuery Mobile - Pages

The user can interact with jQuery Mobile pages, which groups the content into logical views and page views. Page view can be animated using page transitions. Multiple pages can be created using HTML document and therefore, there is no need of requesting the content from the server.

Following table demonstrates the types of pages in detail.

Conventions, not requirements

• The data-role attribute elements such as the header, footer, page, and content are used to provide the basic format and structure of a page.

• For single page documents, the page wrapper was required for auto-initialization is set as optional.

• The structural element can be excluded for a webpage with custom layout.

• To manage pages, the page wrapper is injected by the framework when it is not included by the markup.

Prefetching pages

Including the attribute data-prefetch, we can prefetch pages into the DOM in the single page templates. For more information click here.

DOM Cache

When the browser memory gets full in DOM, then it slow downs the mobile browser or might crash due to loading of multiple pages. There is a simple method to keep the DOM tidy −

• When a page is loaded via ajax, then it indicates to remove the page from DOM when you redirect to another page.

• The previous page which you have visited can be retrived from the cache when you revisit it.

• Instead of removing the pages, you can tell jQuery mobile to keep it in DOM by using the following line −

$.mobile.page.prototype.options.domCache = true;

• Set the domCache option as true on the page plugin to keep all the pages in the DOM, which was visited previously.

pageContainerElement.page({ domCache: true });

jQuery Mobile - Icons

jQuery Mobile provides a set of built-in icons, which can be used with buttons, listview buttons which will make the buttons more attractive.

Following table lists down some of the icons used in the jQuery Mobile framework.

jQuery Mobile - Transitions

It allows to change property values which occurs over specified duration and alters behavior of an element from one state to another state by applying different styles for each state.

Following table lists down some of the page transitions used in the jQuery Mobile framework −

Setting Transition and Global Configuration

By default, pages will have fade transition in the framework. You can use custom transitions by adding the data-transition attribute to the link. You can use different default transition effects for the page using defaultPageTransition option globally. For dialogs, you can make use of defaultDialogTransition option.

Fallback Transition

All transitions support 3D transformations except the fade transition. The devices which do not support 3D transformation, they will have to make use of fade transition. Some browsers do not support 3D transformations for each transition type, so you can use the fade as default transition fallback.

Max Scroll for Transitions

The transitions are set to none when you are scrolling from or to a page and the scroll position will be three times the height of the device screen. Sometimes, you may get slow in responding or the browser may crash when you click any navigation element; so to avoid this we are using the scroll position for transition by using getMaxScrollForTransition function.

Max Width for Transitions

You can disable the transition when the window width is higher than the pixel width. You can configure the max width for transitions using the $.mobile.maxTransitionWidth global option, which is set to false by default. It takes values such as pixel width or false value, and the transition will be set to none if it is not a false value when the window is higher than the specified value.

Same Page Transition

You can add the transitions to the current page using the allowSamePageTransition option of page container widget's change() method.

Creating Custom Transitions

You can create the custom transitions in the page using the $.mobile.transitionHandlers option that expands the selection of transitions on the website or application.

jQuery Mobile - Layouts

Grid systems are used to create page layouts through a series of rows and columns that house your content.

Below table demonstrates the types of grids in detail.

jQuery Mobile - Widgets

A widget is a small gadget or control of your jQuery mobile application. Widgets can be very handy as they allow you to put your favorite applications on your home screen in order to quickly access them.

Following table demonstrates the types of Widgets in detail.

jQuery Mobile - Events

jQuery Mobile allows to create dynamic web pages. By using events, you can set up event-driven process on the elements, which are triggered by the user's interaction such as mouse click, mouse hover on an element, key press on the keyboard, etc.

Following table lists some of the events for the mobile devices, which are supported by jQuery Mobile.

jQuery Mobile - Forms

Creation of forms is easy and very flexible, which are built with a combination of standardized form elements and buttons.

Following table demonstrates the types of form in detail.

jQuery Mobile - Themes

It sets different types of theme on the buttons, navbars, blocks, links and so on. You can set the theme using data-theme attribute.

Following table describes the use of the theme functionality in different areas which is supported by jQuery Mobile.

jQuery Mobile - CSS Classes

jQuery CSS Classes

You can use different types of CSS classes to style the elements as described in the below sections.

Global Classes

The following classes can be used as global classes on jQuery Mobile widgets −

Button Classes

The following table lists button classes that are used with anchor or button elements −

Icon Classes

The following table lists icon classes that are used with anchor or button elements −

Theme Classes

It provides two different types of themes such as theme "a" and theme "b" to customize the look of the application. You can create your own theme classes by appending swatch letter (a-z). Following table lists theme classes which are specified from letter a to z.

Grid Classes

Following table lists grid classes that are used with equal width, no border, background, margin or padding.

jQuery Mobile - Data Attributes

Button

It specifies a clickable button that includes content like text or images using the class ui-btn. It is deprecated in version 1.4. Use the ui-btn attribute instead of using data-role = "button" attribute.

Following table lists the button elements used with data attribute.

Checkbox

Following table lists the checkbox elements used with type = "checkbox".

Collapsible

Following table lists collapsible elements used with data-role = "collapsible" attribute.

Collapsible Set

Following table lists the collapsible set elements used with the data-role = "collapsibleset" attribute.

Controlgroup

Following table lists Controlgroup elements used with data-role = "controlgroup" attribute −

Dialog

Following table lists dialog elements used with data-dialog="true" attribute.

Enhancement

Following table lists enhancement elements used with data-enhance="false" or data-ajax = "false" attribute.

Fixed Toolbar

Following table lists the toolbar elements used with data-position = "fixed" attribute.

Flip Toggle Switch

Following table lists the flip toggle elements used with data-role = "flipswitch" attribute −

Footer

The following table lists footer elements used with data-role="footer" attribute −

Header

Following table lists the header elements used with data-role = "header" attribute.

Inputs

Following table lists the input elements used with type = "text|search|etc" attribute.

Link

Following table lists the link elements used with jQuery Mobile.

List

Following table shows the list elements used with data-role = "listview" attribute.

List Item

Following table shows list item elements used with data-role = "listview" attribute.

Navbar

Following table lists the navbar elements used with data-role = "navbar" attribute.

Page

Following table lists the page elements used with data-role = "page" attribute.

Popup

Following table lists the popup elements used with data-role = "popup" attribute.

Radio Button

Following table lists the radio button elements used with type = "radio" attribute.

Select

Following table lists the select elements used with jQuery Mobile.

Slider

Following table lists the slider elements used with type = "range" attribute.