Your SlideShare is downloading. ×
IntroJs
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

IntroJs

358

Published on

Intro JS …

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
358
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Demo PROVIDER -> OMIDKH68@GMAIL.COM 10
  • 11. RTL Support PROVIDER -> OMIDKH68@GMAIL.COM 11
  • 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. End Question ? PROVIDER -> OMIDKH68@GMAIL.COM 13

×