jquerymobile加载消息主题

Question

我对jQuery Mobile上的加载消息有疑问.

默认情况下,加载消息主题是a,根据jQuery Mobile代码:

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

我想知道如何更改此div的默认主题,我无法弄明白.

提前致谢.

Answer 1

回答旧版本,请参阅下面的jQuery Mobile 1.1.0+

我不知道您可以在mobileinit事件处理程序中设置的变量,但是您可以在文档准备好时更改主题类:

//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');
});

这是上述解决方案的jsfiddle(您可以从按钮列表中更改加载对话框的主题):http://jsfiddle.net/jasper/eqxN9/1/

更新

jQuery Mobile 1.1.0增加了一些支持,你可以设置一些默认值:

loadingMessage 字符串,默认值:"loading"设置加载页面时显示的文本.如果设置为false,则根本不会显示该消息.

loadingMessageTextVisible 布尔值,默认值:false显示加载消息时文本是否应该可见.对于加载错误,文本始终可见.

loadingMessageTheme 字符串,默认值:"a"文本可见时加载消息框使用的主题.

资料来源:http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

请注意,您必须设置loadingMessageTextVisible到true了装载机主题覆盖到,因为新的装载机的设计工作.如果你没有设置消息,那么没有背景可以改变颜色......

这是一个演示:http://jsfiddle.net/vHJnd/

通过文档快速浏览表明,您现在可以动态执行此操作:

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

您可以将这些参数添加到showPageLoadingMsg()函数中以强制显示主题和消息.这是设置默认值的替代方法.

这是一个演示:http://jsfiddle.net/vHJnd/1/

Answer 2

看起来加载消息不可主题化。

当你查看源代码时，你会看到：

// 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>" );

这意味着它总是选择ui-body-a

也许最安全的方法是覆盖div.ui-loader.ui-body-a，请参阅http://jsfiddle.net/N7Z9e/95/