jquerymobile加载消息主题
我对jQuery Mobile上的加载消息有疑问。
默认情况下，加载消息主题是a ，根据jQuery Mobile代码：
...
我想知道如何更改此div的默认主题，我无法弄明白。
提前致谢。
它看起来加载消息不可用。
当您查看源代码时，您将看到：
// loading div which appears during Ajax requests // will not appear if $.mobile.loadingMessage is false var $loader = $( "" );
这意味着它总是选择ui-body-a
可能最安全的方法是覆盖div.ui-loader.ui-body-a ，参见http://jsfiddle.net/N7Z9e/95/
回答旧版本，请参阅下面的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'); });
这是上述解决方案的一个方面（您可以从按钮列表中更改加载对话框的主题）： 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/
在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
Change the Background Color of the Loading Message, Choose a Theme
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小提琴（ 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 。 你必须在这里采取这些步骤
- 找到“defaultHtml：”
- 用它替换它
“defaultHtml：”////
最好的运气
- 请删除所有空格…