jquerymobile加载消息主题

我有一个关于在jQuery Mobile上加载消息的问题

根据jQuery Mobile代码，默认情况下，加载消息主题为

a

：

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

。。。

我想知道如何更改这个div的默认主题，我想不出来

---

提前感谢。

加载消息似乎无法主题化

查看源代码时，您将看到：

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

//加载Ajax请求期间出现的div
//如果$.mobile.loadingMessage为false，则不会显示
变量$loader=$（“”）；

这意味着它总是选择

ui-body-a

---

可能最安全的方法是覆盖

div.ui-loader.ui-body-a

，请参阅旧版本的答案，请参阅下面的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');
});

以下是上述解决方案的JSFIDLE（您可以从按钮列表中更改加载对话框的主题）：

更新 jQuery Mobile 1.1.0为此添加了一些支持，您可以设置一些默认值：

加载消息字符串，默认值：“加载”设置显示的文本 当加载页面时。如果设置为false，则不会显示该消息 一点也不

loadingMessageTextVisible布尔值，默认值：false是否显示文本 显示加载消息时应可见。文本总是 对于加载错误可见

loadingMessageTheme字符串，默认为：“a”加载的主题 当文本可见时，消息框使用

资料来源：

请注意，由于新的加载器设计，必须将

loadingMessageTextVisible

设置为

true

，加载器主题覆盖才能工作。如果您没有设置消息，则没有背景来更改

下面是一个演示：

快速阅读文档表明，您现在也可以在运行中执行此操作：

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

您可以将这些参数添加到

showPageLoadingMsg（）

函数中，以强制显示主题和消息。这是设置默认值的替代方法

---

下面是一个演示：

我建议使用他们发布的jQM ThemeRoller工具：

但是如果你想玩它，你可以这样做：

JS

HTML

列出的jsfiddle（）是一个很好的起点。我正在进一步研究这个问题。我发现你有时不得不使用！重要信息：覆盖基础样式。我讨厌使用它，但有时没有其他好的方法来绕开它

    /* 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 1.1中，加载程序现在可以主题化了。演示/测试页面如下：

---

我有非常成功的解决方案

您只需转到您的

jquery mobile.js

。 你必须在这里采取这些步骤

查找“defaultHtml:

”

将其替换为
“defaultHtml:“//

////

”

祝你好运

• 请删除所有空格

---

问题实际上是一个框架问题，而不是CSS或“我的js”解决方案。通常我更喜欢CSS解决方案，而不是js解决方案，但是有了这样一个CSS解决方案，如果你想要使用不同的“e”样本，你必须记住手动更新你的“a”样本的e-ish覆盖；容易忘记。虽然Jasper的js解决方案解决了这个问题，但首先一个可配置的加载程序会更好。。。使框架灵活/可配置的最佳解决方案；）@jinglesthula我更新了我的问题，因为在最新稳定版本的jQuery Mobile中，您可以为加载程序设置一些选项。旧的“正确”答案现在已经过时。无需破解：）从jquerymobile1.1.0开始，这已经更新。您可以设置一些默认值来改变加载程序的外观：（另请参阅我的答案以了解和更新）

<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>

.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}*/;
}

    /* 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{

    }