jquerymobile loading message theme

Question

I have a question about the loading message on jQuery Mobile.

By default, the loading message theme is a, according to jQuery Mobile code:

<div class="ui-loader ui-body-a ui-corner-all" style="top: 204.5px; ">...</div>

I would like to know how I can change the default theme of this div, I can't figure it out.

Thanks in advance.

Answer 1

Answer for old version, see below for jQuery Mobile 1.1.0+

I'm not aware of a variable you can set in the mobileinit event handler but you can change the theme'd class when the document is ready:

//run the code on `document.ready`
jQuery(function ($) {

    //find the loader div and change its theme from `a` to `e`
    $('.ui-loader').removeClass('ui-body-a').addClass('ui-body-e');
});

Here is a jsfiddle of the above solution (you can change the theme for the loading dialog from a list of buttons): http://jsfiddle.net/jasper/eqxN9/1/

Update

jQuery Mobile 1.1.0 adds some support for this, you can set some defaults:

loadingMessage string, default: "loading" Set the text that appears when a page is loading. If set to false, the message will not appear at all.

loadingMessageTextVisible boolean, default: false Whether the text should be visible when a loading message is shown. The text is always visible for loading errors.

loadingMessageTheme string, default: "a" The theme that the loading message box uses when text is visible.

Source: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

Note that you must set loadingMessageTextVisible to true for the loader theme override to work because of the new loader design. If you don't set a message then there is no background to change the color-of...

Here is a demonstration: http://jsfiddle.net/vHJnd/

A quick peruse through the documentation shows that you can do this on the fly as well now:

$.mobile.showPageLoadingMsg("a", 'loading message');

You can add these arguments to the showPageLoadingMsg() function to force a theme and message to display. This is an alternative to setting a default value.

Here is a demonstration: http://jsfiddle.net/vHJnd/1/

Answer 2

It looks the loading message isn't themable.

When you look in the source code you will see:

// loading div which appears during Ajax requests
// will not appear if $.mobile.loadingMessage is false
var $loader = $( "<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>" );

This means that it picks always ui-body-a

Probably the safest way is to override div.ui-loader.ui-body-a, see http://jsfiddle.net/N7Z9e/95/