https://github.com/raoul2000/yii2-guiders-widget
Wrapper around "Guiders JS" jQuery plugin.
https://github.com/raoul2000/yii2-guiders-widget
Last synced: 3 months ago
JSON representation
Wrapper around "Guiders JS" jQuery plugin.
- Host: GitHub
- URL: https://github.com/raoul2000/yii2-guiders-widget
- Owner: raoul2000
- License: bsd-3-clause
- Created: 2014-07-06T16:26:29.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2014-07-24T11:44:08.000Z (almost 11 years ago)
- Last Synced: 2025-03-19T03:41:33.084Z (3 months ago)
- Language: JavaScript
- Size: 156 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGE.md
- License: LICENSE.md
Awesome Lists containing this project
README
yii2-guiders-widget
==========================
Wrapper around "Guiders JS" jQuery plugin, "*a user experience design pattern for introducing users to a web application*".
Check out the [Home page](http://www.jeffpickhardt.com/guiders/) of the Plugin.
> Please note that this extension does not provide any aditionnal feature than the one available in the wrapped plugin.
> It has no other dependency than the [Yii2 Framework](http://www.yiiframework.com/)
Installation
------------
The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
Either run
```
php composer.phar require --prefer-dist raoul2000/yii2-guiders-widget "*"
```
or add
```
"raoul2000/yii2-guiders-widget": "*"
```
to the require section of your `composer.json` file.
Usage
-----
This is an example no how to use this extension once it is installed. Let's create a 3 steps tour :
```php
true,
'pluginOptions' => [
'buttons' => [['name' => "Next"]],
'description' => "Guiders 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 plenty of nice options to play with"
." so to create a nice tour.
Check the Guiders-JS page
",
'id' => "third",
'title' => "Welcome to Guiders.js!",
'closeOnEscape' => true,
'xButton' => true,
'width' => 400
]
]);
?>
```
For more information on the plugin options and usage, please refer to [guiders-JS@github](https://github.com/jeff-optimizely/Guiders-JS).
License
-------
**yii2-guiders-widget** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details.