jquery mobile, отключите все кнопки, когда отображается загрузка оверлея - PullRequest
Новая
       16

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

17 голосов
/ 06 июля 2011

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

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

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

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

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

Спасибо

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

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

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

Ответы [ 4 ]

41 голосов
/ 03 августа 2012

Простой способ, который я только что нашел, это использовать фиксированный фон с z-index и opacity:

Добавить эту 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 - это пользовательский класс, но JQM добавляет ui-loading к моменту загрузки.

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

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

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

14 голосов
/ 04 июня 2013

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

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

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

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

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

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

1 голос
/ 25 июля 2013

Я внес небольшое изменение в рабочее решение, предоставленное 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;
}
0 голосов
/ 06 июля 2011

Документы:

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

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

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

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