Заставка 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();
Для создания AJAX-индикаторов загрузки можно также воспользоваться бесплатной библиотекой AjaxLoader.js http://musicvano.github.io/ajaxloader Она позволяет генерировать AJAX-индикаторы динамически с помощью нескольких строк кода.