Getting started with jQueryMobile

JQueryMobile is an excellent framework for compiling mobile Web applications. JQueryMobile is built on popular jQuery and user interfaces (UIS). It is an effective unified framework for you to write mobile Web applications. With jQueryMobile, You can ensure consistency of appearance, perception, and behavior on different mobile platforms. Introduction

JQuery Mobile is an excellent framework for compiling Mobile Web applications. Built on popular jQuery and user interfaces (UIS), jQuery Mobile is an effective unified framework that allows you to write Mobile Web applications. With jQueryMobile, You can ensure consistency of appearance, perception, and behavior on different mobile platforms. Basic jQuery Mobile features include:

General simplicity and flexibility
This framework is easy to use. You can:

It mainly uses the Mark drive to develop dynamic pages, and does not need or only need a small amount of JavaScript.

Use advanced JavaScript and events.

Use an HTML file and multiple embedded pages.

Splits an application into multiple pages.

Gradually enhanced and fully compatible
Although jQuery Mobile uses the latest HTML5, CSS3, and JavaScript, not all Mobile devices provide such support. JQuery Mobile's philosophy is to support both high-end and low-end devices, such as those that do not support JavaScript, to provide the best experience possible.

Supports touch screen input and other input methods.
JQuery Mobile provides support for different input methods and events: touch screen, mouse, and user input based on cursor focus.

Accessibility
JQuery Mobile is designed with access capabilities that support Accessible Rich Internet Applications (WAI-ARIA) to help people with disabilities who use auxiliary technologies access Web pages.

Lightweight and Modular
The framework is lightweight and has a JavaScript library with a size of 24KB (reduced and compressed in version 1.0.1), a CSS of 7KB, and some icons.

Topic
The framework also provides a theme system that allows you to define your own application styles. With this new ThemeRoller application, you can easily create your own themes.

The jQuery Mobile framework includes all the UI components required to build a complete Mobile Web application and website. Page, dialog box, toolbar, different types of list views, various form elements and buttons. JQuery Mobile is built on the jQuery kernel, so you can access key devices, including HTML and XML Document Object Model (DOM) traversal operations, event processing, and Ajax server communication; and Web page animation and image effects.

With jQuery Mobile, you can easily write basic Web applications. Because jQuery Mobile is a very comprehensive infrastructure and provides some advanced events and APIs, you can also write Advanced Mobile Web applications and websites.

This article describes the basic principles of jQuery Mobile's latest version (version 1.0.1. Learn about browser support, UI components, and APIs. To learn from this article, you need:

I used HTML before.

Understanding the basic principles of JavaScript

Basic jQuery knowledge

You can download the jQuery Mobile source code example used in this article. References provide some information about jQueryMobile, jQuery, JavaScript, DOM, and HTML5.

Back to Top

Browser support

Mobile device browsers have gone through a long journey, but not all mobile devices support HTML5, CSS 3, and JavaScript. This field plays a role in jQuery Mobile's continuous enhancement and support for comprehensive compatibility.

JQuery Mobile supports both high-end and low-end devices, including those that do not support JavaScript. Continuous enhancement is a design concept that includes the following core principles (Source: Wikipedia ):

All browsers should be able to access all basic content.

All browsers should be able to access all basic functions.

The enhanced layout is provided by CSS with external links.

The enhanced behavior is provided by CSS with external links.

Browser preferences of end users should be paid attention.

All basic content should be rendered on the underlying device (as designed), and more advanced platforms and browsers will use additional external links for continuous enhancement of JavaScript and CSS.

JQuery Mobile provides support for a large number of Mobile devices. JQuery Mobile supports devices in three categories based on their support levels:

Level: The device supports a fully enhanced user experience and Ajax-based animated page transition. JQueryMobile supports over 20 different devices, including iOS 3.2-5.0, Android 2.1-2.3 and 3.0, BlackBerry 6-7 and Playbook, Skyfire 4.1, and Opera Mobile; it also supports desktop browsers Chrome, Firefox, Internet Explorer, and Opera.

Level B: The device supports enhanced user experience, but does not have the Ajax navigation feature. Supported devices include BlackBerry 5.0, Opera Mini 5.0-6.5, and Nokia Symbian ^ 3.

Level C: The device supports a basic, non-enhanced HTML experience. Supported devices include the last generation of smartphones, including BlackBerry 4.X, Windows Mobile, and other devices.

See references to obtain a complete list of supported jQuery Mobile platforms.

The rest of this article describes jQuery Mobile Page construction, HTML5 data attributes, and UI components.

Back to Top

Construct a jQuery Mobile Page

As shown in Listing 1, a typical jQuery Mobile page consists of three parts: Header, content, and footer.

Listing 1. Typical jQuery Mobile Page


HEADER

CONTENT AREA

FOOTER

Figure 1 shows the structure of Listing 1.

Figure 1. HTML5 jQuery Mobile Page Structure

The header usually contains the page title, logo, and other information. Content is placed in specific Web applications and various widgets. The footer is suitable for navigation.

To use jQuery Mobile's advanced functions and HTML syntax, the jQuery Mobile HTML document must define the HTML5 document type. The rest of the HTML document includes:

AndSection, whereContains jQuery Mobile references and CSS Mobile themes

Partially contains jQuery Mobile content

Listing 2 shows an example of the HTML5 jQuery Mobile document.

Listing 2. jQuery Mobile HTML5 Page Structure
// Define the HTML5 doctype:

// Define the HTML5With references to jQuery, jQuery Mobile and CSS mobile themes:


Page Title

Jquery.mobile-1.1.0-rc.1.min.css "/>
Script
Min. js "> script

// Define the HTML documentThat operator des the jQuery Mobile elements:



HEADER

CONTENT AREA

FOOTER



:
:



// The footer can be turned into a navigation bar very easily, as follows:



One
Two
Three
None

Figure 2 shows the footer created in Listing 2.

Figure 2. footer

Although the page, header, content, and footer attributes are optional, we recommend that you use them to make the page clearer and follow jQueryMobile.

Single page, multiple pages, and page links

A single HTML document can have one or more jQuery Mobile pages, as shown in the data-role = "page" attribute. If multiple pages exist, you must specify a unique page id for the ID attribute to link external pages. When loading a multi-page HTML document, only the first page is displayed.

JQuery Mobile uses Ajax to load pages. The loading progress bar is displayed during this process. If the page is loaded successfully, the UI widget is enhanced, the page is added to the DOM, and applied to page animation or transition.

You do not need to use Ajax for Link and HTTP loading. You cannot use this method or animated transition. Without Ajax, you can use rel = "external", data-ajax = "false", or target to load the link.

Back to Top

Supported events and Methods

In JavaScript, when using jQuery, You can reference the jQuery object itself as $ and get the permission to access the jQuery device. The jQuery Mobile framework with a scalable jQuery kernel can be accessed by using $. mobile. It also provides access to jQuery Mobile events and methods. $. The events and methods published by mobile are described as follows.

Event

Like other jQuery events, you can bind the live () and bind () functions to jQuery Mobile events. For example, touch events include tap, taphold, and various swipe and virtual mouse events. You can bind targeted changes and rolling events, such as scrollstart and scrollstop. Page events can receive notifications when:

Before the page is created

Page creation

Only when the page is displayed or hidden

When the page is displayed or hidden

Initialize jQuery Mobile

If you are familiar with jQuery, you may remember that the Code starts to be executed when DOM is loaded. You need to initialize it in the $ (document). ready () function. With jQuery Mobile, You can bind the initialization to the pageinit event, as shown in listing 3.

Listing 3. Binding to a pageint event
$ ('# WelcomePage'). live ('pageinit ', function (event ){...});

After the page is initialized, The pageinit event can be triggered as a reference page. The page is valid no matter how it is loaded (directly loaded or loaded using Ajax.

Override jQuery Mobile Default Value

If a mobileinit event has been bound, this event is triggered when jQuery Mobile is executed. You can override the default values of jQueryMobile. Listing 4 shows an example. You can overwrite the default page transition, default page loading text, default page loading topic, and others.

Listing 4. initialize jQuery Mobile
$ (Document). bind ("mobileinit", function () {// apply overrides here });

Visit the jQuery Mobile global configuration page (see references) to learn more about jQuery default values.

Method

JQuery Mobile also provides many methods with $. mobile Objects. Table 1 shows some available methods.

Table 1. jQuery Mobile Method

Method	Use
$. Mobile. changePage	It is programmed to switch from one page to another. For example, use the slider to transition to the weblog. php page and use $. mobile. changePage ("weblog. php", "slide ").
$. Mobile. loadPage	To load an external page, use jQuery Mobile to enhance it and insert it to the DOM.
$. Mobile. showPageLoadingMsg	Displays the page load message.
$. Mobile. hidePageLoadingMsg	Hide page loading messages.
$. Mobile. path. isSameDomain	A utility for comparing two URL fields.
$. Mobile. activePage	A page reference in the current view

The jQuery Mobile method page provides many methods and utilities (see references ).

Back to Top

Widgets and HTML5 data-* attributes

JQuery Mobile relies on the HTML5 data-* attribute to support various UI elements, transition effects, and page structures. These HTML5 attributes are the key to jQuery Mobile's simplicity. Browsers that do not support HTML5 will silently discard the HTML5 attribute.

The following list shows the code and rendering of different UI components and data-* attributes, and how to use them to create UI components.

The data-role attribute is used to define various widgets. Not all UI widgets are determined by the data-role attribute (however, the selection, Slider, and text input are all ). See data-attribute references for details about various data-* attributes (see references ).

As mentioned above, the jQuery Mobile UI framework includes building complete Mobile Web applications and websites (including pages, dialogs, toolbar, various view lists, various form elements, buttons, and other content) all UI components. We have introduced the HTML5 data-* attribute used to define various jQuery Mobile UI widgets. The rest of this section will discuss the most common jQuery Mobile UI widgets.

Dialog Box

The modal dialog box is an important page type and is useful for alerting or sending messages to users. Any page can be transitioned to a modal dialog box by adding the data-rel = "dialog" attribute to the page anchor link, as shown below.

Terms
Use

You can reference the transition and topic to this dialog box. The jQuery Mobile Dialog page provides more information for reference (see references ).

List View

List View is one of the heaviest UI elements of mobile apps. JQuery Mobile provides a rich set of List View elements, including basic, nested, split button, number, counting bubble, and Icon list. Let's take a look at the code and rendering of some list views.

Basic Chain ListListing 19. Basic Chain List

Acura

 
Figure 17. Basic Chain List

Nested listListing 20. nested list

Get Friends

Post to Wall

Send Message

Figure 18. nested list

Ordered listListing 21. ordered list

The Godfather

Figure 19. ordered list

Split button listListing 22. Split button list
 

Elephant

The White Stripes

Data-transition = "slideup"> Purchase album

Figure 20. Split button list

Illustration style list

JQuery Mobile supports all these list views as the illustration style list (list with rounded corners) by specifying the data-insert attribute, as shown in Figure 21.

Figure 21. Illustration style list

Listing 23 shows the illustration style list Code

Listing 23. Illustration style list
 

Get Friends

Post to Wall

Send Message

JQuery Mobile provides a rich set of list views. For more information, see the jQuery Mobile list view page (see references ).

Form

Form is a common Web component used to publish information to the server. JQuery Mobile supports many form UI components: text input, search input, Slider, flip switch, single choice button, check box, selection menu, and topic form. All of these are easy to create. The previous section describes most of these elements.

JQuery Mobile provides a rich set of list views. Listing 24 shows a form with the menu button and submit button.

Listing 24. Simple form and submit button

The select button is set by the Local MachineBut jQuery Mobile improves its appearance. The statement groups different values for easy presentation. The form itself is passed through the Local MachineDefined.Figure 22 shows the structure in listing 24.Figure 22. Simple Form with selection menu and submit button The jQuery Mobile form Element page provides more information (see