Jquery mobile, отключить все кнопки при загрузке наложения

На самом деле я могу вызвать этот код

$(":input").attr("disabled",true); //Disable all input fields

чтобы отключить все кнопки на моей странице. Но я не знаю, насколько хороша производительность, когда у меня есть много кнопок на моей странице.

Я увидел трюк, что мы создаем накладку индикатора загрузки, которая находится выше всего элемента на странице = > пользователь больше не может нажимать на кнопки

Есть ли способ повторного использования загрузочного наложения jQuery mobile для архивирования вышеупомянутого трюка? Я плохо разбираюсь в CSS, поэтому, надеюсь, кто-то может мне помочь.

Спасибо

Отредактировано:

В итоге я использовал jquery.blockUI-плагин для jQuery, и он работает так, как ожидалось. И я добавил div по умолчанию css из jquery mobile, так что у меня все еще есть сообщение загрузки jQuery mobile и поведение, которое я хотел

Рабочий пример здесь

Ответ 1

Простым способом, который я только что нашел, является использование фиксированного фона с z-индексом и непрозрачностью:

Добавьте этот css:

.ui-loader-background {
    width:100%;
    height:100%;
    top:0;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    display:none;
    position: fixed;
    z-index:100;
}

.ui-loading .ui-loader-background {
    display:block;
}

ui-loader-background - это пользовательский класс, но ui-загрузка добавляется JQM к тому, когда отображается загрузка.

И этот элемент в вашем теле:

<div class="ui-loader-background"> </div>

пример: http://jsfiddle.net/5GB6B/1/

Ответ 2

В моем случае я использую:

$("body").addClass('ui-disabled');
$.mobile.loading("show",{
text: "Cargando",
textVisible: true
});

Показывает загрузку пользовательского сообщения и отключает всю страницу.

Когда вы закончите свою задачу, вам необходимо:

$.mobile.loading("hide");
$("body").removeClass('ui-disabled');

Надежда помогает вам

Ответ 3

Я сделал небольшое изменение для рабочего решения, предоставленного Xorax, чтобы переместить фон загрузчика в крайнее левое окно браузера, как я заметил в браузере Chrome, была область, которая не полностью покрыта:

.ui-loader-background {
    width:100%;
    height:100%;
    left:0;
    top:0;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    display:none;
    position: fixed;
    z-index:100;
}

Ответ 4

Документы:

http://jquerymobile.com/demos/1.0b1/docs/api/methods.html

Показать сообщение загрузки страницы, которое настраивается через $.mobile.loadingMessage. Пример:

//cue the page loader           
$.mobile.showPageLoadingMsg();

Скрыть сообщение загрузки страницы, которое настраивается через $.mobile.loadingMessage. Пример:

//cue the page loader           
$.mobile.hidePageLoadingMsg();