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
Документы:
Показать сообщение загрузки страницы, которое настраивается через $.mobile.loadingMessage.
Пример:
//cue the page loader
$.mobile.showPageLoadingMsg();
Скрыть сообщение загрузки страницы, которое настраивается через $.mobile.loadingMessage.
Пример:
//cue the page loader
$.mobile.hidePageLoadingMsg();