README

包装了 "Guiders JS" jQuery 插件，"一种用于向用户介绍 Web 应用的用户体验设计模式"。

请查看插件的 主页。

请注意，此扩展除了包装插件中可用的功能外，不提供任何其他功能。它除了依赖 Yii2 框架 外，没有其他依赖。

安装

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

运行以下命令

php composer.phar require --prefer-dist raoul2000/yii2-guiders-widget "*"

或添加以下内容到您的 composer.json 文件的 require 部分。

"raoul2000/yii2-guiders-widget": "*"

使用方法

以下是如何安装此扩展后使用此扩展的示例。让我们创建一个 3 步的教程

<?php 

// creates the first guider

raoul2000\widget\guiders\Guiders::widget([
	'show' => true,
	'pluginOptions' => [
		'buttons' => [['name' => "Next"]],
		'description' => "<b>Guiders</b> are a user interface design pattern for introducing features " 
			. " of software. This dialog box, for example, is the first in a series of guiders " 
			. " that together make up a guide.",
		'id' => "first",
		'next' => "second",
		'overlay' => true,
		'title' => "Welcome to Guiders.js!",
		'closeOnEscape' => true,
		'xButton' => true,
		'width' => 500
	]
]);


// creates the second guider. Note that 'show' is false by default.

raoul2000\widget\guiders\Guiders::widget([
	'pluginOptions' => [
		'buttons' => [['name' => "Next"]],
		'description' => "This is an intresting lorem ipsum colomn or what !",
		'id' => 'second',
		'next' => 'third',
		'overlay' => true,
		'title' => "Focus",
		'closeOnEscape' => true,
		'xButton' => true,
		'width' => 500,
		'attachTo'  => '#focusHere',
		'autoFocus' => true,
		'highlight' => '#focusHere',
		'position' => 6
	]
]);


// creates the third guider. 

raoul2000\widget\guiders\Guiders::widget([
	'pluginOptions' => [
		'buttons' => [
			[
				'name' => "Done",
				'onclick' => new yii\web\JsExpression('function(){guiders.hideAll();}')
			],
			[
				// if name is "close", "next", or "back", 
				// onclick defaults to guiders.hideAll, guiders.next, or guiders.prev respectively)
				'name' => 'back' 
			],
			[
				'name' => 'before you leave!',
				'onclick' => new yii\web\JsExpression('function(){alert("thanks for joining our Guiders Tour !");}')
			]
		],
		'description' => "That's all folks...well not exactly. There are <b>plenty</b> of nice options to play with"
			." so to create a nice tour. <h4>Check the Guiders-JS page</h4>",
		'id' => "third",
		'title' => "Welcome to Guiders.js!",
		'closeOnEscape' => true,
		'xButton' => true,
		'width' => 400
	]
]);

?>

有关插件选项和使用方法的更多信息，请参阅 guiders-JS@github。

许可证

yii2-guiders-widget 根据 BSD 3-Clause 许可证发布。有关详细信息，请参阅附带的 LICENSE.md 文件。