README

页面指南扩展

能够为页面添加指南或助手，以改善用户导航或向用户解释功能

安装

安装此扩展的首选方式是通过 composer。

运行以下命令之一

php composer.phar require --prefer-dist matejch/yii2-page-guide "^1.0"

或者

"matejch/yii2-page-guide": "^1.0"

将以下内容添加到您的 composer.json 文件的依赖部分。

配置

1. 首先迁移表

这是在页面上保存规则所必需的

./yii migrate --migrationPath=@vendor/matejch/yii2-page-guide/src/migrations

2. 将模块添加到您的 web.php 中

'pageGuide' => [
    'class' => \matejch\pageGuide\PageGuide::class,
]

3. 将小部件添加到您希望使用页面指南的页面

默认情况下，它将在放置小部件的位置渲染

 <?= \matejch\pageGuide\widget\PageAssist::widget() ?>

如果要将它定位在右上角，请使用小部件选项 'btnPositionCss'

<?= \matejch\pageGuide\widget\PageAssist::widget(['btnPositionCss' => 'position: fixed;top: 100px;right: -2px;']) ?>

4. 来自 intro.js 库的额外简介选项

如果您愿意，可以通过属性 introOptions 将 intro.js 选项添加到小部件中

更多信息请参阅 intro.js

<?= \matejch\pageGuide\widget\PageAssist::widget(['introOptions' => ['showProgress' => true] ]) ?>

5. 可选

小部件现在也支持 intro.js 回调

可用的回调有 oncomplete onexit onbeforeexit onchange onbeforechange onafterchange

<?= \matejch\pageGuide\widget\PageAssist::widget(['introCallbacks' => [
    'onchange' => new \yii\web\JsExpression("function (targetElement) { alert('next step'); }")]
]) ?>

用法

使用以下方式访问索引和表单以创建规则

{key_of_module_you_use_in_web.php}/page-guide/index

1. 创建新的规则集

将您 yii 网页上的 URL 插入第一个输入框中

点击按钮跳转到在新窗口中打开 URL 的页面

从此窗口拖放您想要使用的元素到上一个窗口中

您也可以手动设置，只需添加步骤编号、元素 ID 和文本即可

查看页面指南表单的图像

2. 将小部件添加到您想要使用的页面

当您处于创建模式时，每个可拖动的元素都会用蓝色虚线框突出显示

默认情况下，在创建模式中，页面上的所有可见输入元素都被设置为可拖动的，如果页面上检测到表单

同样，所有具有 form-group 类的元素也被设置。

通过小部件选项 'selectors'（数组），您可以设置多个类名或 ID 或其他有效的 CSS 选择器

在创建模式中挑选可拖动元素。

<?= \matejch\pageGuide\widget\PageAssist::widget(['selectors' => ['.guide','#selectable_id']]) ?>

以下是一个示例，展示了设置规则后，用户可以显示指南/助手时的样子