README

为 Yii2 的 Swiper 小部件

这是一个为 ActiveRecords 在 Yii 2.0 PHP 框架中提供的小部件和相关行为。它允许用户通过点击、触摸滑动或使用左右箭头键跳转到相邻的记录。

建议在您的网站上使用 Bootstrap 4。

yii2-swiper 的演示在这里。

安装

安装 yii2-swiper 的首选方式是通过 Composer。您可以将以下内容添加到您的 composer.json 文件的 require 部分中

"sjaakp/yii2-swiper": "*"

或者运行

composer require sjaakp/yii2-swiper "*"

您也可以通过下载 ZIP 格式的源代码手动安装 yii2-swiper。

使用 Yii2-swiper

Yii2-swiper 由两个类组成：位于命名空间 sjaakp\swiper 中的 PrevNextBehavior 和 Swiper。

PrevNextBehavior

这是一个为 Behavior 提供的 ActiveRecord。它为拥有 ActiveRecord 提供了两个方法

getPrev()：返回一个指向上一条记录的 ActiveQuery。
getNext()：返回一个指向下一条记录的 ActiveQuery。

换句话说，拥有 ActiveRecord 现在有两个虚拟属性

$prev：上一条记录，或如果当前记录是第一条，则为 null。
$next：下一条记录，或如果当前记录是最后一条，则为 null。

PrevNextBehavior 有两个属性

$attribute string|array 必须设置。
- 如果 string：定义排序的 ActiveRecord 属性名称。
- 如果 [ '<attributeName>' => function($model) ]：返回属性值的函数。
$sort SORT_ASC|SORT_DESC 设置排序是递增还是递减。默认：SORT_ASC（递增）。

PrevNextBehavior 可以像这样添加到 ActiveRecord 中

<?php
use sjaakp\swiper\PrevNextBehavior;

class Event extends \yii\db\ActiveRecord
{
    // ...    
    public function behaviors()
    {
        return [
            [
                'class' => PrevNextBehavior::class,
                'attribute' => 'date',
            ]
        ];
    }
    // ...
}

Swiper

这是一个 Widget，渲染到上一页和下一页（如果可用）的按钮。它还实现了处理触摸滑动和键盘输入的代码。它的 $model 属性应设置为具有 PrevNextBehavior 的 ActiveRecord 实例。

Swiper 的其他属性包括

$labelAttribute string 提供按钮标签文本的属性名称。必须设置。
$shortLabelAttribute null|string 提供按钮短标签文本的属性名称。可选。当屏幕宽度小于 $breakpoint 指定的值时，短标签会出现。默认：null（无短标签）。
$titleAttribute null|string 提供按钮弹窗标题文本的属性的名称。可选。如果为 null（默认值），则标题文本将与标签文本相同。
$breakpoint string 定义何时出现短标签的 Bootstrap 4 断点。默认：'sm'。
$url string 按钮链接的基础 URL。默认：'view'。
$swipeId null|string 对触摸滑动敏感的元素的 HTML-id。如果为 null（默认值），则是 <body> 元素。
$options array 周围 <nav> 元素的 HTML 选项。
$registerLinkTags bool 是否在 HTML 头部注册链接标签以显示上一页和下一页。默认：false，以避免与其他小部件冲突。

在一个视图文件中，比如 event\view，可以按照以下方式使用 Swiper

<?php
    use sjaakp\swiper\Swiper
?>
<h1>...</h1>
...
<?= Swiper::widget([
    'model' => $model,
    'labelAttribute' => 'title',
    // 'url' => 'view',       // default 
    'registerLinkTags' => true
]) ?>
... other view code ...

sjaakp / yii2-swiper

维护者

详情

README

为 Yii2 的 Swiper 小部件

安装

使用 Yii2-swiper

PrevNextBehavior

Swiper