IntroJs

Intro.js
Better introductions for websites and features with a step-by-step
guide for your projects.

Copyright (C) 2012 Afshin Mehrabani
(afshin.meh@gmail.com)
© usabli.ca 2013 - A weekend project by Afshin Mehrabani
Provider -> omidkh68@gmail.com
4-Feb-14

Features
Easy to Use

Just include the js and css files and add data-step and data-intro to your code.

Fast & Small

4 KB JavaScript and 2.5 KB CSS (gzip). That's all.

Keyboard + Mouse navigation

Ability to navigate with the mouse, or the keyboard - ←, →, ENTER and ESC to exit.

Browser Compatibllity

Better compatibility is on the roadmap, but currently it should work in recent versions
of Firefox, Chrome and IE8 also.

Free & Open-Source

Free and open-source (including commercial use). Published under MIT license.

PROVIDER -> OMIDKH68@GMAIL.COM

2

Where to get
1) This github repository, using :

git clone https://github.com/usablica/intro.js.git

2) Using bower :

bower install intro.js --save

3) Download it from CDN (Content Delivery Network)
• http://www.jsdelivr.com/#!intro.js
• http://cdnjs.com/#introjs


3

How to use
Intro.js can be added to your site in three simple steps:
1) Include Intro.js and Introjs.css (or the minified version for production) in your page. Use
to-Left language support.

2) Add data-intro
For Example :

and

data-step

introjs-rtl.min.css

for Right-

to your HTML elements.

<a href='http://google.com/' data-intro='Hello step one!'></a>

3) Call this JavaScript function:
introJs().start();


4

API (Popular)
introJs.start()
Start the introduction for defined element(s).

introJs().start();

introJs.goToStep(step)
Go to specific step of introduction.

introJs.goToStep(2).start(); // start introduction from step 2

introJs.exit()
Exit the introduction.

introJs().exit();

introJs.oncomplete(providedCallback)
Set callback for when introduction completed.

introJs().oncomplete(function(){
alert(“ end of introduction ”);
});


5

How to use Attributes And Options
introJs.setOption(option, value)
Parameters:
option : String Option key name.
value : String/Number Value of the option.
Returns:
introJs object.
Example:
introJs().setOption("skipLabel", "Exit");

Set a group of options :
introJs().setOption({"skipLabel":"Exit", “tooltipPosition":“right"});


6

Attributes
Attributes :
•

data-intro

: The tooltip text of step

•

data-step

: Optionally define the number (priority) of step

•

data-tooltipClass

•

data-position

: Optionally define a CSS class for tooltip

: Optionally define the position of tooltip,


top

,

left

,

right

or

bottom

. Default is

bottom

7

Options
•

steps

•

nextLabel

: Next button label

•

prevLabel

: Previous button label

•

skipLabel

: Skip button label

•

doneLabel

•

tooltipPosition

•

tooltipClass

•

exitOnEsc

•

showStepNumbers

•

keyboardNavigation

•

showButtons

•

showBullets

: For defining steps using JSON configuration

: Done button label
: Default tooltip position

: Adding CSS class to all tooltips
: Exit introduction when pressing Escape button,

true

: Show steps number in the red circle or not,
: Navigating with keyboard or not,

true

or

: Show introduction navigation buttons or not,
: Show introduction bullets or not,


true

or

or

true

false

or

false

false
true

or

false

false
8

Using with
Rails
If you are using the rails asset pipeline you can use the introjs-rails gem.
Yii framework
You can simply use this project for Yii framework: https://github.com/moein7tl/Yii-IntroJS

Drupal
Here you can find an IntroJs integration for Drupal: https://drupal.org/sandbox/alexanderfb/2061829
AngularJS
For AngularJS, you can use the directives in angular-intro.js.


9

Demo


10

RTL Support


11

Resources
http://usablica.github.io/intro.js/
Get Instant IntroJs Book On :
• Packtpub

• Amazon
• Barnes and noble

• Safari Books Online
• O Reilly


12

End

Question ?


13

IntroJs

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (11)

Semelhante a IntroJs

Semelhante a IntroJs (20)

Último

Último (20)

IntroJs