Блокировка прядильного интерфейса пользователя

Question

Мне было интересно, если кто-нибудь мог бы пролить свет на то, как я могу добавить крутящийся прелоадер (как использует apple) с помощью плагина jQuery Block UI.Прелоадер должен вращаться, пока не загрузится контент AJAX.Это возможно с Block UI?

Любое направление будет полезно, спасибо!

Answer 1

Найдите хорошее анимированное изображение пульсометра в Интернете, например так:

Установите скрытый дивертор, чтобы показать его.

<div id="throbber" style="display:none;">
    <img src="/img/busy.gif" />
</div>

Скажите blockUI использовать этот div в качестве сообщения.

$.blockUI({ message: $('#throbber') });

После завершения вызова ajax, убить пульсера:

$.ajax({
    complete: function(data) {
        // kill the block on either success or error
        $.unblockUI();
    }
});

Вы также можете использовать обратные вызовы ajax success / error для управления blockUI по-разному для каждого результата вместо завершения.

Answer 2

Я взял ответ, предоставленный mujimu , и исправил небольшую проблему с ним. У меня есть многократное использование "пульсатора", происходящего одновременно. Я обнаружил, что он испортится, и пульсатор перестанет работать, если я включу его до того, как будет разблокирован существующий.

Это моё решение ...

function ReloadDetails(id) {
    $('#' + id + '_Details').block({ message: $('<img src="/images/ajax-loader.gif"/>') });
    $.get(...);
}

Этот ajaxLoaderPath предоставляется моим cshtml для решения проблем с виртуальными каталогами.

Answer 3

Да, это возможно.Вы можете добавить на свой сайт предварительный загрузчик в любом стиле, который хотите использовать на этом сайте ...

http://www.preloaders.net/

ОБНОВЛЕНИЕ:

См. Это для получения дополнительной информации ...

https://stackoverflow.com/questions/6014386/can-anyone-recommend-an-asp-net-busybox-control/6014442#6014442

Answer 4

Я ненавижу представлять другую библиотеку только для одной функции, поэтому я сам ее реализовал, используя только jQuery, JavaScript и Bootstrap 3.

Когда я нажимаю кнопку, мой код добавляет модальную блокировку в таблицу, делает вызов ajax и ждет 0,5 секунды, затем разблокирует, чтобы показать вращающийся GIF (потому что это может быть слишком быстро, чтобы заметить).Спасибо за @NaveedButt, я нашел https://icons8.com/preloaders/ для создания GIF с цветом темы моего сайта.

Модал Throbber: (GIF по центру по горизонтали и вертикали)

<div id="throbber" class="modal" role="dialog" style="display:none; position:relative; opacity:0.6; background-color:white;">
    <img style="margin: 0 auto;
                position: absolute;
                top: 0; bottom: 0; left:0; right:0;
                margin: auto;
                display: block;
               " src="/static/images/spinning.gif" />
</div>

Кнопка:

<div class="row">
    <div class="col-lg-12">
        <div class="pull-right">
            <button type="button" id="reload" class="btn btn-primary pull-right-button" style="width: 120px;">Reload</button>
        </div>
    </div>
</div>

JavaScript + jQuery:

function block() {
    var body = $('#panel-body');
    var w = body.css("width");
    var h = body.css("height");
    var trb = $('#throbber');
    var position = body.offset(); // top and left coord, related to document

    trb.css({
        width: w,
        height: h,
        opacity: 0.7,
        position: 'absolute',
        top:        position.top,
        left:       position.left
    });
    trb.show();
}
function unblock() {
    var trb = $('#throbber');
    trb.hide();
}
$(document).ready(function(){
    $('#reload').click(function(){
        block();
        $.ajax({
            type:       "GET",
            url:        "{% url 'scriptsList'%}",
            async:      false
        });
        setTimeout(function(){
            unblock();
        }, 500); //wait 0.5 second to see the spinning gif

    });
});

Окончательный результат: