更新

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事件处理程序中设置的变量，但是您可以在文档准备就绪时更改主题类：~~

< S>

//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 string ，默认：“loading”设置显示的文字   何时加载页面。如果设置为false，则不会显示该消息   一点都不。

loadingMessageTextVisible boolean ，默认值：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/

Answer 3

在jQuery Mobile 1.1中，加载器现在可以设置为主题。演示/测试页面在这里： http://jquerymobile.com/demos/1.1.0-rc.1/docs/config/loadingMessageTextVisible.html

Answer 4

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

http://jquerymobile.com/themeroller/

但如果您想玩它，请转到：

http://jsfiddle.net/yLyFs/5/

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

Answer 5

列出的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看到一些改进。

Answer 6

我有非常成功的解决方案...

您只需转到jquery-mobile.js。你必须在这里采取这些步骤

找到“defaultHtml：”＆lt; div class ='“+ b +”'＆gt;＆lt; span class ='ui-icon-loading'＆gt;＆lt; / span＆gt;＆lt; h1＆gt;＆lt; / h1＆gt;＆lt; / div＆gt;“
用
替换它 “defaultHtml：” //＆LT; div class ='“+ b +”'＆gt; //＆lt; span class ='ui-icon-loading'＆gt; //＆lt; / span＆gt;＆lt; h1＆gt;＆lt; / h1＆gt;＆lt; / div＆gt;“

最好的运气

请删除所有空格......

jquerymobile加载消息主题

6 个答案:

更新