我对 jQuery Mobile 上的加载消息有疑问。
默认加载消息主题为a，根据jQuery Mobile代码：
<div class="ui-loader ui-body-a ui-corner-all" style="top: 204.5px; ">...</div>
我想知道如何更改这个 div 的默认主题，我不知道。
提前致谢。
【问题讨论】：
标签： jquery jquery-mobile
旧版本的答案，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 boolean，默认：false 是否文字 显示加载消息时应该可见。文字总是 加载错误可见。
loadingMessageTheme string，默认："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/
【讨论】：
看起来加载消息不是主题化的。
当你查看源代码时，你会看到：
// 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/
【讨论】：
在 jQuery Mobile 1.1 中，加载器现在是可主题化的。演示/测试页面在这里： http://jquerymobile.com/demos/1.1.0-rc.1/docs/config/loadingMessageTextVisible.html
【讨论】：
我建议他们发布的 jQM ThemeRoller 工具：
但如果你想玩弄它，那就去吧：
JS
$('.changeLoadingBackgroundColor').click(function() {
$.mobile.showPageLoadingMsg();
var bgColor = $(this).attr('id');
var loader = $('div.ui-loader');
loader.removeAttr('class');
loader.attr('class','ui-loader ui-body-'+bgColor+' ui-corner-all');
$(this).trigger('create');
});
HTML
<div id="test" data-role="page">
<div data-role="content">
Change the Background Color of the Loading Message, Choose a <b>Theme</b>
<div data-role="controlgroup" data-type="horizontal">
<input type="button" id="a" class="changeLoadingBackgroundColor" value="A"/>
<input type="button" id="b" class="changeLoadingBackgroundColor" value="B"/>
<input type="button" id="c" class="changeLoadingBackgroundColor" value="C"/>
<input type="button" id="d" class="changeLoadingBackgroundColor" value="D"/>
<input type="button" id="e" class="changeLoadingBackgroundColor" value="E"/>
<input type="button" id="custom-color" class="changeLoadingBackgroundColor" value="Custom Color"/>
</div>
</div>
</div>
CSS
.ui-body-custom-color,
.ui-dialog.ui-overlay-b {
border: 1px solid #7FFF00 /*{b-body-border}*/;
background: #cccccc /*{b-body-background-color}*/;
color: #8A2BE2 /*{b-body-color}*/;
text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ #fff /*{b-body-shadow-color}*/;
font-weight: normal;
background-image: -webkit-gradient(linear, left top, left bottom, from( #e6e6e6 /*{b-body-background-start}*/), to( #ADFF2F /*{b-body-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* IE10 */
background-image: -o-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/);
}
.ui-body-custom-color,
.ui-body-custom-color input,
.ui-body-custom-color select,
.ui-body-custom-color textarea,
.ui-body-custom-color button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-body-custom-color .ui-link-inherit {
color: #8A2BE2 /*{b-body-color}*/;
}
.ui-body-custom-color .ui-link {
color: #00FFFF /*{b-body-link-color}*/;
font-weight: bold;
}
.ui-body-custom-color .ui-link:hover {
color: #00FFFF /*{b-body-link-hover}*/;
}
.ui-body-custom-color .ui-link:active {
color: #00FFFF /*{b-body-link-active}*/;
}
.ui-body-custom-color .ui-link:visited {
color: #00FFFF /*{b-body-link-visited}*/;
}
【讨论】：
列出的 js fiddle (http://jsfiddle.net/N7Z9e/95/) 是一个很好的起点。我正在对此进行一些构建。我发现您有时必须使用 !important 来覆盖基本样式。我讨厌使用它，但有时没有其他好方法可以绕过它。
/* override loader */
div.ui-loader.ui-body-a {
border: 3px solid #104070 /*{a-body-border}*/;
background-color: rgba(0, 62, 87, .9); color: rgba(0, 62, 87, .9);
background-image: none;
font-weight: normal;
}
/* Control the text placement, font size, etc..*/
div.ui-loader h1 { margin-top:10px; margin-bottom:4px; color:#fff !important;}
/* Change The Spinner Image And Styles *
.spinner{
}
重要提示：在 JQM 的未来版本中，加载器将更容易控制加载器中的消息。您可以通过 git hub 看到一些改进。
【讨论】：
我对此有非常成功的解决方案...
您只需转到您的jquery-mobile.js。
你必须在这里采取这些步骤
祝你好运