timurmelnikov/yii2-showloading

该软件包已 废弃 并不再维护。作者建议使用 timurmelnikov/yii2-loading-overlay 软件包。

Yii2 扩展用于连接 jQuery showLoading 插件

维护者

详细信息

github.com/timurmelnikov/yii2-showloading

源代码

问题

安装: 208

依赖项: 0

建议者: 0

安全: 0

星标: 1

关注者: 1

分支: 0

开放问题: 1

语言:JavaScript

类型:yii2-extension

0.1.2 2017-05-30 14:25 UTC

Requires

MIT 93a4639c1ae4070f1525f88186f5e48212d561d0

  • Timur Melnikov <melnilovt.woop@gmail.com>

jqueryajaxwidgetyii2showLoading

This package is auto-updated.

Last update: 2022-02-01 12:48:00 UTC

README

Yii2 扩展用于连接 jQuery showLoading 插件
本扩展旨在在处理 Ajax 请求时，将 Ajax 加载图片叠加到块上。

此扩展不再维护！建议使用 - Yii2 视图包装器用于 jQuery LoadingOverlay

演示

插件演示页面

安装

将以下内容添加到 composer.json 文件的 "require" 部分

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

编辑文件后，执行命令 composer update

使用

在将使用 yii2-showloading 的视图中，连接

use timurmelnikov\widgets\ShowLoading;

输出小部件

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

属性 'loadingType' 负责Ajax加载图片。可以选择从 1 到 5 的值。根据值，将输出不同的 Ajax 加载图片。

在处理 Ajax 请求的 JavaScript 代码中，使用方法 - 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);