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

Copyright (C) 2012 A...
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...
Where to get
1) This github repository, using :

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

2) Using bower :

bow...
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 ...
API (Popular)
introJs.start()
Start the introduction for defined element(s).

introJs().start();

introJs.goToStep(step)
G...
How to use Attributes And Options
introJs.setOption(option, value)
Parameters:
option : String Option key name.
value : St...
Attributes
Attributes :
•

data-intro

: The tooltip text of step

•

data-step

: Optionally define the number (priority)...
Options
•

steps

•

nextLabel

: Next button label

•

prevLabel

: Previous button label

•

skipLabel

: Skip button la...
Using with
Rails
If you are using the rails asset pipeline you can use the introjs-rails gem.
Yii framework
You can simply...
Demo

PROVIDER -> OMIDKH68@GMAIL.COM

10
RTL Support

PROVIDER -> OMIDKH68@GMAIL.COM

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

• Amazon
• Barnes and noble

• Saf...
End

Question ?

PROVIDER -> OMIDKH68@GMAIL.COM

13
Upcoming SlideShare
Loading in...5
×

IntroJs

384

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
384
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "IntroJs"

  1. 1. 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
  2. 2. 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
  3. 3. 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 PROVIDER -> OMIDKH68@GMAIL.COM 3
  4. 4. 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(); PROVIDER -> OMIDKH68@GMAIL.COM 4
  5. 5. 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 ”); }); PROVIDER -> OMIDKH68@GMAIL.COM 5
  6. 6. 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"}); PROVIDER -> OMIDKH68@GMAIL.COM 6
  7. 7. 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, PROVIDER -> OMIDKH68@GMAIL.COM top , left , right or bottom . Default is bottom 7
  8. 8. 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, PROVIDER -> OMIDKH68@GMAIL.COM true or or true false or false false true or false false 8
  9. 9. 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. PROVIDER -> OMIDKH68@GMAIL.COM 9
  10. 10. Demo PROVIDER -> OMIDKH68@GMAIL.COM 10
  11. 11. RTL Support PROVIDER -> OMIDKH68@GMAIL.COM 11
  12. 12. Resources http://usablica.github.io/intro.js/ Get Instant IntroJs Book On : • Packtpub • Amazon • Barnes and noble • Safari Books Online • O Reilly PROVIDER -> OMIDKH68@GMAIL.COM 12
  13. 13. End Question ? PROVIDER -> OMIDKH68@GMAIL.COM 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×