timurmelnikov/yii2-showloading

This package is abandoned and no longer maintained. The author suggests using the timurmelnikov/yii2-loading-overlay package instead.

Yii2 расширение для подключения плагина jQuery showLoading

Installs: 206

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 1

Forks: 0

Open Issues: 1

Language:JavaScript

Type:yii2-extension

0.1.2 2017-05-30 14:25 UTC

This package is auto-updated.

Last update: 2019-05-30 13:04:29 UTC


README

Yii2 расширение для подключения плагина jQuery showLoading
Расширение предназначено для наложения картинки Ajax загрузки на блок, при обработке Ajax запроса.

Это расширение, больше не поддерживаю! Рекомендую использовать - Yii2 виджет-обертка для jQuery LoadingOverlay

Демонстрация работы

Demo страничка плагина

Установка

Добавить в секцию "require" файла composer.json:

{
    "require": {
        "timurmelnikov/yii2-showloading": "dev-master"
    }
}

После редактирования файла выполнить команду composer update

Использование

В представлении, где будет использоваться yii2-showloading, подключить:

use timurmelnikov\widgets\ShowLoading;

Вывести виджет:

echo ShowLoading::widget(['loadingType' => 1]);

Свойство 'loadingType' отвечает за картину Ajax загрузки. Есть возможность использовать значения от 1 до 5. В зависимости от значения будет выводиться различная картинка Ajax загрузки.

В коде javaSctipt, который обрабатывает Ajax запрос использовать методы - showLoading() и hideLoading() для показа и скрытия картинки Ajax загрузки соответственно:

$('#id-блока').showLoading();
//Обработка Ajax запроса...
$('#id-блока').hideLoading();

Прммер использования:

//Контейнер, ктоторый будет "накрывть" индикатор загрузки
<div id="test"></div>

<?php
//Кнопки 
echo Html::button('Показать индикатор', ['class' => 'btn btn-primary', 'id' => 'show-button']);
echo Html::button('Скрыть индикатор', ['class' => 'btn btn-primary', 'id' => 'hide-button']);

//Вызов виджета индикатора
echo ShowLoading::widget(['loadingType' => 1]);

//Код JavaScript
$script = <<<JS
//Показать индикатор        
$('#show-button').click(function () {
    $('#test').showLoading();
});
//Скрыть индикатор       
   $('#hide-button').click(function () {
    $('#test').hideLoading();
});
JS;

//Подключение JavaScript
$this->registerJs($script);