• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content




Intro JS

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



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    IntroJs IntroJs Presentation Transcript

    • 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 PROVIDER -> OMIDKH68@GMAIL.COM 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(); PROVIDER -> OMIDKH68@GMAIL.COM 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 ”); }); PROVIDER -> OMIDKH68@GMAIL.COM 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"}); PROVIDER -> OMIDKH68@GMAIL.COM 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, PROVIDER -> OMIDKH68@GMAIL.COM 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, PROVIDER -> OMIDKH68@GMAIL.COM 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. PROVIDER -> OMIDKH68@GMAIL.COM 9
    • 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
    • End Question ? PROVIDER -> OMIDKH68@GMAIL.COM 13