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 ).CodeOK !).
FirstFirstJquery mobile 1.2.0Reference:
<! Doctype HTML> Compile JavaScript Functions:<SCRIPT> // display loader function showloader () {// display loader. for jquery mobile 1.2.0 $. mobile. loading ('show', {text: 'loading... ', // The text displayed in the loader textvisible: True, // whether to display the text theme: 'A', // The loader theme style a-e textonly: false, // whether only the text HTML is displayed: "" // HTML content to be displayed, slice, etc.});} // hide the loader. for jquery mobile 1.2.0function 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:
<Body> <Div data-role = "page"> <! -- Header --> <Div data-role = "Header">
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, seeJquery mobile 1.2.0Official demo description:
Http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html
Note: jquery mobile1.1.0The Ajax loader and1.2.0Different versions! Potholes!
Jquery mobile 1.1.0 displays the following code for the loader:
<SCRIPT> // display loader function showloader () {// display loader. for jquery mobile 1.1.0 $. mobile. loadingmessage = 'loading... '; // displayed text $. mobile. loadingmessagetextvisible = true; // whether the text is displayed $. mobile. loadingmessagetheme = 'a'; // The theme style of the loader. A-E $. mobile. showpageloadingmsg (); // display 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
which are now deprecated . in addition to the methods for showing and hiding,
$. mobile. showpageloadingmsg and
$. mobile. hidepageloadingmsg are also d eprecated .This means that version 1.2.0 is not used.$. Mobile. showpageloadingmsgAnd$. Mobile. hidepageloadingmsgThe two methods show the loader.
If you have any questions, please contact us!
For reprint, enter the original address:Http://blog.csdn.net/zht666/article/details/8563025
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
