Кастомизация
22
Янв
1

Заставка AJAX-заставка ожидания с помощью JQuery

Небольшой фокус при помощи jQuery, позволяющий вывести пользователю уведомление о том, что в фоне происходит некая работа и неплохо было бы дождаться ее окончания. Появление и скрытие уведомления будет организовываться JS-кодом.

Приступим:

  • Скачайте последнюю сжатую версию jQuery (локальное зеркало: jquery-1.7.1.min.js) и добавьте в конец JS-файла такой код:
    jQuery.fn.center = function () {
        this.css("position", "absolute");
        this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
        this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
        return this;
    }
    

    Этот код дополняет jQuery новым методом, обеспечивающим центрирование элемента к которому он применяется.
    Загрузите jQuery в CRM в качестве JS Веб-ресурса;

  • Скачайте иконку в стиле AJAX и загрузите ее в CRM в качестве GIF Веб-ресурса. Дайте ему имя ajax.gif;
  • Создайте новый JS Веб-ресурс с именем AjaxLoader.js и таким содержимым:
    function AjaxLoader() {
        $('body').append('<div id="loadingDiv"></div>');
    
        $('#loadingDiv')
            .append('<p id="loadingText"></p>')
            .css('background', 'url(' + Xrm.Page.context.getServerUrl() + '/WebResources/new_ajax.gif) no-repeat 50% 25%')
            .css('padding-top', '90px')
            .css('background-color', '#F5F5F5')
            .css('border', '3px solid #00008B')
            .css('height', '160px')
            .css('width', '300px')
            .center()
            .hide(); // изначально скрываем сообщение
    
        $('#loadingText')
            .css('text-align', 'center')
            .css('font', '20px bolder')
            .css('font-family', 'Segoe UI, Tahoma, Arial');
    }
    

    Этот код создает DIV элемент с параграфом внутри и задает им определенные свойства. При этом вызываются два метода: один центрирует DIV элемент по центру экрана, а второй скрывает DIV при его создании (чтобы он «случайно» не отобразился при вызове функции AjaxLoader);

  • Подключите JS Веб-ресурс AjaxLoader.js к нужной форме и вызовите на онлоаде функцию AjaxLoader;
  • Далее Вам нужно использовать следующие скрипты для управления уведомлением:
    • Задание текста сообщения
      $('#loadingText').text("Ждем чего-то...");
      
    • Отображение сообщения
      $('#loadingDiv').show();
      
    • Скрытие сообщения
      $('#loadingDiv').hide();
      



Комментарии (1)
  • Vano 22.01.2012

    Для создания AJAX-индикаторов загрузки можно также воспользоваться бесплатной библиотекой AjaxLoader.js http://musicvano.github.io/ajaxloader Она позволяет генерировать AJAX-индикаторы динамически с помощью нескольких строк кода.

*

code