README

此小部件旨在在处理 Ajax 请求时将加载图片叠加到块上。

屏幕截图

工作演示

安装

运行命令

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

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

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

添加后，执行命令：composer update

使用方法

有两种使用方式

1-使用 jQuery LoadingOverlay

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

timurmelnikov\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 timurmelnikov\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"。

timurmelnikov / yii2-loading-overlay

维护者

详细信息