Yii 1.1: eguiders

...because users should never be lost on a web page again !
55 followers

EGuiders

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.

Requirements

Yii 1.1 or above

Usage

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...

Resources

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.

Changes

version 1.1.0.0

  • updated to Guider 1.2.8 new plugin options (autoFocus, closeOnEscape, isHashable, onClose, onHide)
  • demo pages updated

version 1.0.0.0

  • initial release

Total 5 comments

#14959 report it
Raoul at 2013/09/24 01:22pm
I hope too ...

..and please do not hesitate to tell me if you encounter a problem (but note I'm not responsible for the wrapped JQuery Plugin ;) )

#14943 report it
dacoder at 2013/09/23 01:18pm
Looks exciting

Hoping it works out as expected. Thanks :)

#11859 report it
Paul_Kish at 2013/02/08 12:47am
Awesome

Looking to test it out on a web app I am working on

#9161 report it
gunnit at 2012/07/25 04:59am
very nice

nice plugin comes in very handy when you need to point the user to a specific action. But how do u use the offset parameter like this

'offset'                =>array('top'=> '100'),
#5643 report it
sidewinder at 2011/10/28 04:25am
Good one!

Maybe it's a bit too bloated for a regular tooltips, but it's great as a tutorial tool or new futures eye catcher. It already solved one of my biggest problems of teaching customers how to operate admin panel on their websites. Thank you for your time, for showing guiders plugin and for creating yii extensions out of it.

Leave a comment

Please to leave your comment.

Create extension