JQuery Mobile displays the ajax loader manually and prompts loading..., jqueryajax
When developing with jQuery Mobile, sometimes we need to display a loading prompt box during the ajax request (for example, a rotating image + a prompt: loading ...). At this time, we can manually display the jQuery Mobile loader. The general process is as follows:
1. Start the loader and display "loading ...";
2. Make an ajax request. After the request is complete, update the page data and refresh the jQuery Mobile control style;
3. Disable the loader.
The following describes how to manually display the loader in jQuery Mobile 1.2.0 and 1.1.0 (very simple, just a few lines of code is OK !).
FirstJQuery Mobile 1.2.0Reference:
[Html]View plaincopy
- <! DOCTYPE html>
- <Html>
- <Head>
- <Title> Ajax test </title>
- <Meta charset = "gbk">
- <Meta name = "viewport" content = "width = device-width, initial-scale = 1">
- <! -- Place the files downloaded from the official website in the jquery-mobile Directory of the project -->
- <Link rel = "stylesheet" href = "jquery-mobile/jquery.mobile-1.2.0.min.css"/>
- <Link rel = "stylesheet" href = "jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>
- <Script src = "jquery-mobile/jquery-1.8.2.min.js"> </script>
- <Script src = "jquery-mobile/jquery. mobile-1.2.0.min.js"> </script>
- <Head>
Compile javascript Functions:
[Javascript]View plaincopy
- <Script>
- // Display the loader
- Function showLoader (){
- // Display loader. for jQuery Mobile 1.2.0
- $. Mobile. loading ('show ',{
- Text: 'loading... ', // text displayed in the loader
- TextVisible: true, // whether to display text
- Theme: 'A', // The theme style of the loader. a-e
- Textonly: false, // whether to display only text
- Html: "" // html content to be displayed, slice, etc.
- });
- }
- // Hide the loader. for jQuery Mobile 1.2.0
- Function hideLoader ()
- {
- // Hide the loader
- $. Mobile. loading ('hide ');
- }
- </Script>
Prepare two buttons, one for starting (displaying) the loader and the other for stopping (hiding) the loader:
[Html]View plaincopy
- <Body>
- <Div data-role = "page">
- <! -- Header -->
- <Div data-role = "header">
- <H3> Ajax test
- </Div>
- <! -- Content -->
- <Div data-role = "content">
- <H3> Ajax test
- <Input type = "button" value = "display ajax loader" onclick = "showLoader ()"/>
- <Input type = "button" value = "Hide ajax loader" onclick = "hideLoader ()"/>
- </Div>
- </Body>
The effect is as follows (Subject: 'A '):
Of course, you can adjust the parameters in $. mobile. loading ('show', {...} to experiment with different loaders.
For more information about the loader, see the official demo of jQuery Mobile 1.2.0.:
Http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html
Note: The ajax loader in jQuery Mobile1.1.0 is completely different from version 1.2.0! Potholes!
JQuery Mobile 1.1.0 displays the following code for the loader:
[Javascript]View plaincopy
- <Script>
- // Display the loader
- Function showLoader (){
- // Display the loader. for jQuery Mobile 1.1.0
- $. Mobile. loadingMessage = 'loading... '; // displayed text
- $. Mobile. loadingMessageTextVisible = true; // whether to display text
- $. Mobile. loadingMessageTheme = 'a'; // The theme style a-e of the loader.
- $. Mobile. showPageLoadingMsg (); // display the loader
- }
- // Hide the loader. for jQuery Mobile 1.1.0
- Function hideLoader (){
- // Hide the loader
- $. Mobile. hidePageLoadingMsg ();
- }
- </Script>
The display effect is similar.
Official1.2.0In this document1.1.0Is described as follows:
The page loading dialog was previusly configured globally with three settings
$. Mobile. loadingMessage,
$. Mobile. loadingMessageTextVisible, and
$. Mobile. loadingMessageTheme
WhichAre now deprecated. In addition to the methods for showing and hiding,
$. Mobile. showPageLoadingMsg and
$. Mobile. hidePageLoadingMsg areAlso deprecated.
This means that the $. mobile. showPageLoadingMsg and $. mobile. hidePageLoadingMsg methods are not used in version 1.2.0 to display the loader.
Jquery mobile uses Ajax to load external document display problems
<Script src = "jquery-1.8.3.min.js"> </script> <script src = "jquery. mobile-1.3.2.min.js "> </script> <script> $ (document ). ready (function () {$. get ("aboutus. php? Type = danye & cid = 1 ", function (result) {$ (" # content "example .html (result );});}) </script> changing the sequence to a normal one seems that Firefox cannot get it. For compatibility, follow the normal ajax method. If you want to use htmlobj as a global variable, you can define an empty one directly outside and assign a value to it after get.
How does jQuery Mobile define global loading without AJAX?
Simply use native jQuery to write it. You don't need to use Mobile anyway.