Granular custom control using the jquery Mobile API

The JQuery mobile API provides another level of control for mobile Web customization. From the customization of global options to the method of hooking up interaction events and exposures, everything can be implemented using this API and is described in this article. At the end of this article, you will know how to refine the customization options you want to use in mobile Web sites and how to write custom code that interacts with the JQuery mobile framework.

This article describes a series of useful properties, events, and exposure methods from the JQuery Mobile framework. In each section, the options are described and code samples are provided to show how it is done. To run any code sample, you must first download the jquery and jquery Mobile framework http://www.aliyun.com/zixun/aggregation/29707.html "> latest version, or in your HTML Files from the JQuery content delivery Network (CDN) are directly referenced in the file.

Global options

The following global options are available through the jquery mobile API, which enables you to change the default behavior of jquery Mobile:

Extend JQuery Mobile initialization Events Create custom namespace page initialize custom page URL key settings active page and button class set default page and dialog conversion custom load and error messages

Extended jQuery Mobile Initialization events

jquery Mobile includes an initialization event that can even be loaded before the Document.ready event in jquery. JQuery Mobile actually triggers its initialization event on the Document object itself, the event name Mobileinit. This allows you to overwrite and extend the default global options for JQuery Mobile, which is the starting point for the entire article. To extend the Mobileinit event, you need to add a custom JavaScript event handler before the jquery Mobile is loaded, and after the jquery framework loads (see Listing 1).

Listing 1. Extending the JQuery Mobile mobileinit event

<script type= "Text/javascript" src= "jquery.js" ></script><script type= "Text/javascript" Custom-jqm-mobileinit.js "></script><script type=" Text/javascript src= "Jquery.mobile.js" ></ Script>

To extend the Mobileinit event, you first need to bind it to a custom function. Listing 2 shows an example that uses the Bind method to extend the Mobileinit event.

Listing 2. Bind to Mobileinit Event

$ (document). Bind ("Mobileinit", function () {//Override global options here});

When you successfully bind to the Mobileinit event, you can overwrite the global option. To override global options, you can use the Extend method of JQuery to extend the $.mobile object (see Listing 3), or you can simply override them by setting each property directly.

Listing 3. Extending $.mobile Objects

$ (document). Bind ("Mobileinit", function () {$.extend ($.mobile, {property = value});

If you have more than one property that you want to update, the Extend method is a clearer option because you do not need to write to the $.mobile object more than once. However, if you only want to update an attribute, you can set each property with very few lines of code (see Listing 4).

Listing 4. Overwrite each property value

$ (document). Bind ("Mobileinit", function () {$.mobile.property = value;});

The $.mobile object is the starting point for setting all properties.