Would you like to focus user attention on this new feature you've implemented last night ? Do you need to need to introduce a brand new GUI to your users ? and what about a simple and interactive tutorial that can be easely added to your pages ? ... well, one solution is to use the Guiders JQuery plugin, now available in Yii as the EGuiders extension.
More than words, check the demo page.
The EGuiders is a wrapper for the Guiders JQuery Plugin.
Yii 1.1 or above
To use this extension, simply declare a widget to create a guide.
$this->widget('ext.eguiders.EGuider', array( 'id' => 'intro', 'next' => 'position', 'title' => 'Welcome', 'buttons' => array(array('name'=>'Next')), 'description' => $this->renderPartial('_guide_intro',null,true), 'overlay' => true, 'xButton' => true, 'show' => true ) );
You can of course create many guiders for one page, chain them and create a complete step by step route to guide your user through your page.
Additional features :
- custom CSS style : overloads default style and turn your guide into a beautiful guide
- position and orientation : attach a guide to any HTML element with JQuery selector
- dynamics : add your own buttons to a guide and define js handler
- jump : a guided tour can also go from page to another (see demo)
- highlight : display overlay except for the highlighted element
With some imaginaton, a boring tour can become a great interactive user experience ! I hope it will be useful to someone...
note that the EGuiders zip file to download includes the demo sample code.
Please report any issue in the Forum discussion thread and not as a comment in this page.
version 220.127.116.11 ¶
- updated to Guider 1.2.8 new plugin options (autoFocus, closeOnEscape, isHashable, onClose, onHide)
- demo pages updated
version 18.104.22.168 ¶
- initial release