The Loader Widget
The loader widget handles the task of displaying the loading dialog when jQuery Mobile pulls in content via Ajax. It can also be displayed manually for custom loading actions using the $.mobile.loading
helper method (See the global method docs).
To configure the loading dialog globally the following settings can be defined on its prototype during the mobileinit
event.
$( document ).on( "mobileinit", function() { $.mobile.loader.prototype.options.text = "loading"; $.mobile.loader.prototype.options.textVisible = false; $.mobile.loader.prototype.options.theme = "a"; $.mobile.loader.prototype.options.html = ""; });
These defaults will only be superseded by the method params object described in the global method docs under $.mobile.loading
.
$.mobile.loading( "show", { text: "foo", textVisible: true, theme: "z", html: "" });
false
true
indicates that other widgets options have default values and causes jQuery Mobile's widget autoenhancement code to omit the step where it retrieves option values from data attributes. This can improve startup time. This option is also exposed as a data attribute: data-defaults="true"
.
Code examples:
Initialize the loader with the defaults
option specified:
$( ".selector" ).loader({ defaults: true });
Get or set the defaults
option, after initialization:
// Getter var defaults = $( ".selector" ).loader( "option", "defaults" ); // Setter $( ".selector" ).loader( "option", "defaults", true );
false
true
. This option is also exposed as a data attribute: data-disabled="true"
.
Code examples:
Initialize the loader with the disabled
option specified:
$( ".selector" ).loader({ disabled: true });
Get or set the disabled
option, after initialization:
// Getter var disabled = $( ".selector" ).loader( "option", "disabled" ); // Setter $( ".selector" ).loader( "option", "disabled", true );
""
Code examples:
Initialize the loader with the html
option specified:
$( ".selector" ).loader({ html: "<span class='ui-icon ui-icon-loading'><img src='jquery-logo.png' /><h2>is loading for you ...</h2></span>" });
Get or set the html
option, after initialization:
// Getter var html = $( ".selector" ).loader( "option", "html" ); // Setter $( ".selector" ).loader( "option", "html", "<span class='ui-icon ui-icon-loading'><img src='jquery-logo.png' /><h2>is loading for you ...</h2></span>" );
loading
Code examples:
Initialize the loader with the text
option specified:
$( ".selector" ).loader({ text: "Loading Page..." });
Get or set the text
option, after initialization:
// Getter var text = $( ".selector" ).loader( "option", "text" ); // Setter $( ".selector" ).loader( "option", "text", "Loading Page..." );
false
Code examples:
Initialize the loader with the textVisible
option specified:
$( ".selector" ).loader({ textVisible: true });
Get or set the textVisible
option, after initialization:
// Getter var textVisible = $( ".selector" ).loader( "option", "textVisible" ); // Setter $( ".selector" ).loader( "option", "textVisible", true );
false
Code examples:
Initialize the loader with the textonly
option specified:
$( ".selector" ).loader({ textonly: true });
Get or set the textonly
option, after initialization:
// Getter var textonly = $( ".selector" ).loader( "option", "textonly" ); // Setter $( ".selector" ).loader( "option", "textonly", true );
null, inherited from parent
Possible values: swatch letter (a-z).
This option is also exposed as a data attribute: data-theme="b"
.
Code examples:
Initialize the loader with the theme
option specified:
$( ".selector" ).loader({ theme: "b" });
Get or set the theme
option, after initialization:
// Getter var theme = $( ".selector" ).loader( "option", "theme" ); // Setter $( ".selector" ).loader( "option", "theme", "b" );
- This method does not accept any arguments.
Invoke the checkLoaderPosition method:
$( ".selector" ).loader( "checkLoaderPosition" );
- This method does not accept any arguments.
Invoke the fakeFixLoader method:
$( ".selector" ).loader( "fakeFixLoader" );
- This method does not accept any arguments.
Invoke the hide method:
$( ".selector" ).loader( "hide" );
$.mobile.loader
prototype options as described in the widget docs or can be controlled via a params object. - This method does not accept any arguments.
Invoke the loading method:
$( ".selector" ).loader( "loading" );
-
This method does not accept any arguments.
Invoke the resetHtml method:
$( ".selector" ).loader( "resetHtml" );
-
This method does not accept any arguments.
Invoke the show method:
$( ".selector" ).loader( "show" );
loadingcreate
Note: The ui
object is empty but included for consistency with other events.
Initialize the loader with the create callback specified:
$( ".selector" ).loader({ create: function( event, ui ) {} });
Bind an event listener to the loadingcreate event:
$( ".selector" ).on( "loadingcreate", function( event, ui ) {} );
Loader Examples
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>loader demo</title> <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div role="main" class="ui-content"> <div data-role="controlgroup"> <button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="false" data-msgtext="" data-icon="arrow-r" data-iconpos="right">Default loader</button> <button class="show-page-loading-msg" data-theme="b" data-textonly="true" data-textvisible="true" data-msgtext="Text only loader" data-icon="arrow-r" data-iconpos="right">Text only</button> <button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme a" data-icon="arrow-r" data-iconpos="right">Theme a</button> <button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme b" data-icon="arrow-r" data-iconpos="right">Theme b</button> <button class="show-page-loading-msg" data-theme="b" data-textonly="true" data-textvisible="true" data-msgtext="Custom Loader" data-icon="arrow-r" data-html="<span class='ui-bar ui-overlay-a ui-corner-all'><img src='../resources/loader/jquery-logo.png' /><h2>is loading for you ...</h2></span>" data-iconpos="right">Custom HTML</button> <button class="hide-page-loading-msg" data-icon="delete" data-iconpos="right">Hide</button> </div> </div> </div> <script> $(document).on( "click", ".show-page-loading-msg", function() { var $this = $( this ), theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme, msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text, textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible, textonly = !!$this.jqmData( "textonly" ); html = $this.jqmData( "html" ) || ""; $.mobile.loading( 'show', { text: msgText, textVisible: textVisible, theme: theme, textonly: textonly, html: html }); }) .on( "click", ".hide-page-loading-msg", function() { $.mobile.loading( "hide" ); }); </script> </body> </html>
Please login to continue.