jquerymobile тема сообщения о загрузке - PullRequest
6 голосов
/ 23 ноября 2011

У меня есть вопрос о загрузке сообщения на jQuery Mobile.

По умолчанию тема загрузки сообщения a, в соответствии с кодом jQuery Mobile:

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

Я хотел бы знать, как я могу изменить стандартную тему этого div, я не могу понять это.

Заранее спасибо.

Ответы [ 6 ]

6 голосов
/ 23 ноября 2011

Ответ для старой версии, см. Ниже для jQuery Mobile 1.1.0 +

Мне неизвестна переменная, которую вы можете установить в обработчике событий mobileinitно вы можете изменить класс theme'd, когда документ будет готов:

//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 string , по умолчанию: «loading» Устанавливает текст, который отображается при загрузке страницы.Если установлено значение false, сообщение не будет отображаться вообще.

loadingMessageTextVisible логическое , по умолчанию: 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/

1 голос
/ 06 марта 2012

В jQuery Mobile 1.1 загрузчик теперь можно настраивать.Демо / тестовая страница находится здесь: http://jquerymobile.com/demos/1.1.0-rc.1/docs/config/loadingMessageTextVisible.html

1 голос
/ 23 ноября 2011

Похоже, что загрузочное сообщение не может быть изменено.

Когда вы посмотрите в исходном коде, вы увидите:

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

0 голосов
/ 21 сентября 2015

У меня есть очень удачное решение для этого ...

Вы просто идете к своему jquery-mobile.js.Вы должны предпринять следующие шаги здесь

  1. find "defaultHtml:"

    "
  2. замените его на
    " defaultHtml: "//
    // //

    "

Best of Luck

  • пожалуйста, удалите все пробелы ...
0 голосов
/ 01 февраля 2012

Перечисленная js fiddle (http://jsfiddle.net/N7Z9e/95/) - хорошая отправная точка. Я немного опираюсь на это. Я считаю, что вам иногда приходится использовать! Важный, чтобы переопределить базовые стили. Я ненавижу его использовать но нет другого хорошего способа обойти это время от времени.

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

0 голосов
/ 23 ноября 2011

Ну, я бы предложил JQM ThemeRoller Tool, который они выпустили:

, но если вы хотите поэкспериментировать с ним, вот вам:

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}*/;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...