README

该小部件用于在处理 Ajax 请求时在块上覆盖加载图片。

截图

演示

jQuery LoadingOverlay 演示页面

安装

运行以下命令

php composer.phar require --prefer-dist ksv2005/yii2-loading-overlay "~1.0.0"

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

{
    "require": {
        "ksv2005/yii2-loading-overlay": "~1.0.0"
    }
}

添加后，执行命令：composer update

使用

有两种使用方式

1-方式 - 简单连接 jQuery LoadingOverlay 到视图

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

ksv2005\widgets\LoadingOverlayAsset::register($this);

然后，使用常规 JavaScript，根据 jQuery LoadingOverlay 文档 显示/隐藏 jQuery LoadingOverlay，例如这样

<?php

//Код на JavaScript (heredoc-синтаксис)
$script = <<< JS

    //Настройки (можно не использовать, тогда - все по умолчанию)
    $.LoadingOverlaySetup({
        color           : "rgba(0, 0, 0, 0.4)",
        maxSize         : "80px",
        minSize         : "20px",
        resizeInterval  : 0,
        size            : "50%"
    });

    //Наложение jQuery LoadingOverlay на элемент с ID #p0, при отправке AJAX-запроса
    $(document).ajaxSend(function(event, jqxhr, settings){
        $("#p0").LoadingOverlay("show");
    });

    //Скрытие jQuery LoadingOverlay на элемент с ID #p0, после выполнения AJAX-запроса
    $(document).ajaxComplete(function(event, jqxhr, settings){
        $("#p0").LoadingOverlay("hide");
    });

JS;

//Подключение скрипта в представлении
$this->registerJs($script, yii\web\View::POS_READY);

?>

2-方式 - 与 Pjax 一起工作

LoadingOverlayPjax 类是标准的 yii\widgets\Pjax 的扩展，并继承其所有行为。

在将使用 Pjax 的视图中，连接

use ksv2005\widgets\LoadingOverlayPjax;

使用 Pjax 的替代品，例如将 GridView 包装在它周围（截图 1）

<?php LoadingOverlayPjax::begin([
'color'=> 'rgba(102, 255, 204, 0.2)',
'fontawesome' => 'fa fa-spinner fa-spin'
]); ?>
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'id',
            'name',
            'phone',
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
<?php LoadingOverlayPjax::end(); ?>

设置

使用 LoadingOverlayPjax 类的公共属性进行设置，例如

<?php LoadingOverlayPjax::begin([
    'color'=> 'rgba(255, 255, 44, 0.8)', //Настраиваем цвет
    'elementOverlay' => '#element'       //Картинка лоадера, наложится на DOM элемент с id="element"
]); ?>
...
<?php LoadingOverlayPjax::end(); ?>

设置（属性）列表

注意：属性 "fontawesome" 的优先级高于属性 "image"。如果设置了两个 "image" 和 "fontawesome" 设置，则 "image" 会被忽略，"fontawesome" 会被显示。