Jquerymobile Advanced (1)

Transferred from: http://mobile.51cto.com/web-315568.htm

Currently, jquery Mobile is a great framework for mobile development in HTML5, which provides a great convenience for developers who are familiar with jquery. JQuery Mobile uses HTML5 and CSS3, in addition to providing many basic mobile page element development capabilities, the framework itself provides a number of extensible APIs for developers to extend the functionality of the JQuery mobile framework itself.

Preparatory work

Please download the latest version of the jquery Mobile framework (for http://jquerymobile.com/) first.

Global Settings

These jquery mobile APIs listed below allow developers to change the default event behavior of their framework

1. Inheriting extended jquery Mobile initialization events
2. Create a custom namespace
3. Page initialization
4. Customizing the key for a page
5. Set the style of the current activation page
6. Set default page and dialog box effects
7. Custom load and custom display error messages

The following are introduced

Inheriting extended jquery Mobile initialization events

jquery Mobile contains an initialized event that can be loaded before the Document.ready event of the jquery framework is loaded, named Mobileinit. This allows developers to inherit and extend the default global options for jquery Mobile. To inherit and extend the Mobileinit event, simply load the custom JavaScript event handler script before the jquery Mobile library is loaded , but be aware that it is loaded after the jquery framework itself , as shown in the following code:

Then, in order to extend the Mobileinit event, you must first use the jquery bind event to customize the method and

The Mobileinit event is bound as follows:

<script src= ". /js/jquery-1.9.1.min.js "></script> <script type=" Text/javascript ">    $ (document). Bind ( "Mobileinit",function() {        alert ("mobile init");    }); </script><script src= ". /js/jquery.mobile-1.4.2.min.js "></script>        

Next, you can use the Extend method of jquery to inherit the $mobile object, and then you can simply reset the new global properties of jquery mobile via the property = value method, as in the following code:

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

If you only set a property value, you can also implement it using the following code, without inheriting the $mobile object:

function () {     = value;});

You can see the $.mobile object as the entry point for setting all the properties.