1. Intro.js

introduce

Intro.js is widely used due to its user-friendly solution and has 19,000 GitHub stars. Its most important functions are:

  1. No dependencies: No additional dependencies are required
  2. Small size, fast: Small size, so the guide process is smooth and intuitive. The total size of the JavaScript file is 10KB and the CSS is 2.5KB.
  3. User friendly: Navigation is user friendly and offers a variety of themes that can be selected according to your preferences.
  4. Browser compatibility: Works with all major browsers, such as Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.
  5. Documentation: The documentation is excellent and contains examples of each of the elements to be covered.

Intro.js address: intro.js

How to install

To use intro.js, you need to install NPM and Node.js. Alternatively, you can get intro.js from the following location:

  • Its GitHub repository: Use Git Clone github.com/usablica/in…
  • Use the bower
Bower install intro.js-saveCopy the code
  • The use of NPM
NPM install intro.js-saveCopy the code
  • CDNs (jsdeliver.com, cdnjs.com)

How to use

Once you have installed intro.js, you can add it to your project in three simple steps:

  1. Add JS and CSS files (intro.js and Introjs.css) to your project. If you need right-to-left language support, you can also add introjs-rtl.min.css.
  2. Add the attributes data-intro and data-step to the associated HTML element. This will enable intro.js for a particular element.
  3. Call the following JavaScript functions:
introJs().start();
Copy the code

Invokes intro.js on a particular element or class with the following additional arguments.

introJs(".introduction-farm").start();
Copy the code

2.Shepherd

Shepherd has 8.1k on GitHub, and its website demonstrates how it works. Its main functions are as follows:

  • Accessibility: Provides keyboard navigation support, conforms to the A11Y specification, and also uses JavaScript to enable focus capture within DOM elements.
  • Highly customizable: Allows appearance changes without affecting performance.
  • Can be easily embedded into the front-end framework of a project.
  • Documentation: Documentation covers installation and customization, including themes and styles for the project.

Shepherd address: shepherdjs.dev/

How to install

Shepherd is integrated with a number of major front-end frameworks and provides the following wrappers for ease of use:

  • Angular: Angular-shepherd is an Angular wrapper that is Angular 8+ compatible.
  • Ember: Ember-Shepherd is an Ember wrapper that has been tested with Ember.js> = V3.8 and is compatible with Ember CLI V12.3.
  • React: React-Shepherd is a React wrapper.
  • Vue: Vue-shepherd is a Vue wrapper.

You can install these wrappers directly using NPM or YARN:

npm install shepherd.js -save
yarn add shepherd.js
Copy the code

It can also be pulled out directly via CDN’s JsDeliver:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/shepherd.js"></script>
Copy the code

How to use

Once Shepherd is installed, you can import the CSS and JS files, as shown below:

<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
<script src="shepherd.js/dist/js/shepherd.min.js"></script>
Copy the code

Here is an example of creating Shepherd Journey and adding steps with DOM elements.

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    classes: 'class-1 class-2'.scrollTo: { behavior: 'smooth'.block: 'center'}}}); tour.addStep({title: 'Creating a Shepherd Tour'.text: `Creating a Shepherd tour is easy. too! \ Just create a \`Tour\` instance, and add as many steps as you want.`.attachTo: {
    element: '.hero-example'.on: 'bottom'
  },
  buttons: [
    {
      action() {
        return this.back();
      },
      classes: 'shepherd-button-secondary'.text: 'Back'
    },
    {
      action() {
        return this.next();
      },
      text: 'Next'}].id: 'creating'
});

tour.start();
Copy the code

3.Bootstrap Tour

Twitter Bootstrap offers its own free guided Tour implementation through Bootstrap Tour, which has 4,315 stars on GitHub.

Bootstrap pop-ups are easy to build. This is a jquery-based plug-in for the bootstrap and uses DOM and JavaScript configured functionality to build the tour. It is as simple as adding JS and CSS files, and provides detailed and in-depth documentation.

Bootstrap Tour address: bootstraptour.com/

How to install

You can simply use the BOOTstrap CSS and JS files:

<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-tour.min.css" rel="stylesheet">.<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tour.min.js"></script>
Copy the code

Or use a separate CSS or JavaScript file:

<link href="bootstrap-tour-standalone.min.css" rel="stylesheet">.<script src="jquery.min.js"></script>
<script src="bootstrap-tour-standalone.min.js"></script>
Copy the code

How to use

After the initial setup, you can create an instance of the navigator and add steps with element details, as follows:

// Instantiate the tour
var tour = new Tour({
  steps: [{element: "#my-element".title: "Title of my step".content: "Content of my step"
  },
  {
    element: "#my-other-element".title: "Title of my step".content: "Content of my step"}}]);// Initialize the tour
tour.init();

// Start the tour
tour.start();
Copy the code

4.Chardin.js

It uses the JQuery plugin to display instructions, the GitHub page contains instructions and documentation, and has 4.9K GitHub star.

Chardin. Js address: heelhook. Making. IO/Chardin. Js /

How to install

You can fork the GitHub repository or download the required CSS and JS files chardinjs.css and chardinjs.min.js and add them to the HTML page.

<link href="chardinjs.css" rel="stylesheet">
<script src="chardinjs.min.js"></script>
Copy the code

How to use

Once set up, you can add instructions to the document. Here is an example of adding instructions to an image element. Data-intro sets the text to be displayed. Data position determines the position of the text.

<img src="img/chardin.png" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right" />
Copy the code

To run Chardin in sequential mode, you need to use different instructions, such as data-chardin-sequenced = “true”, Data-chardin-auto = “true” and data-chardin-delay = “100” to automatically display the movement of the instruction through the element.

<body data-chardin-sequenced="true" data-chardin-auto="false" data-chardin-delay="800" >
Copy the code

Once these elements are ready with instructions, you can initialize the library by clicking a button or have it run automatically, and the library can be confined to a specific container.

$('body').chardinJs();
$('body').on('click'.'button[data-toggle="chardinjs"]'.function (e) {
    e.preventDefault();
    return ($('body').data('chardinJs')).toggle();
});

// Run Explicitly
$('body').chardinJs('start')

// Confine to container
$('.container').chardinJs('start')
Copy the code

Chardin.js allows you to refresh the overlay and also provides a construct option to specify a URL containing text as a JSON object that can be displayed as a directive.

5.PageGuide

PageGuide is a smart guide for interactive, dynamic, and single-page applications based on jQuery and CSS3.

Pageguide address: tracelytics. Making. IO/Pageguide /

You can install PageGuide in one of four ways:

  • Download the latest version from GitHub
  • Git clone: git clone github.com/tracelytics…
  • With a Bower installation
bower install pageguide
Copy the code
  • Install using NPM
npm install pageguide
grunt server
Copy the code

For the initial setup, add a Pageguide.js and CSS file like this:

<script src="{YOUR_PATH}/pageguide.min.js"></sc
<link rel="stylesheet" href="{YOUR_PATH}/pageguide.css">
Copy the code

How to use

Add the following code to the HTML file to initialize PageGuide:

$(document).ready(function() {
    tl.pg.init({ /* optional preferences go here */ });
});
Copy the code

Specify a selector in

    and PageGuide will match it to display the text. Here is an example of adding PageGuide.js to the bottom of the page. 
<ul id="tlyPageGuide" data-tourtitle="REPLACE THIS WITH A TITLE">
  <li class="tlypageguide_left" data-tourtarget=".first_element_to_target">
    <div>
      Here is the first item description. The number will appear to the left of the element.
    </div>
  </li>
  <li class="tlypageguide_right" data-tourtarget="#second_element_to_target">
    <div>
      Here is the second item description. The number will appear to the right of the element.
    </div>
  </li>
  <li class="tlypageguide_top" data-tourtarget=".third_element_to_target > div.is_here">
    <div>
      Here is the third item description. The number will appear above the element.
    </div>
  </li>
  <li class="tlypageguide_bottom" data-tourtarget="#fourth_element_to_target">
    <div>
      Here is the fourth item description. The number will appear below the element.
    </div>
  </li>
</ul>
Copy the code

PageGuide is used to reduce clutter by displaying static messages on a page.

6. Hopscotch

Its main purpose is to solve usability, intuition, and performance problems.

GitHub has 43,000 stars, which in compressed form are only 8KB.

While it does not require dependencies, it can be used if jQuery is available on the page. Hopscotch provides:

  • Event callback: Support onStart, onNext and onClose event callback.
  • Use HTML5 session storage to keep browsing between pages in state.
  • I18n: Support internationalization.
  • Lightweight annotations: Use a convenient method to create annotations.
  • Browser compatibility: It is compatible with all browsers.
  • Customizable: It allows CSS adjustments, bubble tags, and page interactions.

LinkedInAttic/hopscotchThis address: github.com/LinkedInAtt…

How to install

Build Hopscotch using Grunt. Js. This will run the test suite with the new artifacts. Two files, hopscotch-js and hopScotch-css, are then included in the HTML page.

How to use

After the initial setup is complete, you can initialize the navigator using JSON.

// First define your tour.
var tour = {
  "id": "hello-hopscotch"."steps": [{"target": "profile-picture"."placement": "right"."title": "Profile Picture"."content": "This is your profile picture. Looking good!"
    },
    {
      "target": "find-conn"."placement": "bottom"."title": "Find Connections"."content": "The internet is always more fun when you connect with others. Find some connections by clicking here."}};// Then start the tour.
hopscotch.startTour(tour);
Copy the code

Hopscotch can be tested using the Jasmine testing framework and can be continuously integrated with Travis CI.

7. Tourist.js

Tourist.js is a simple library, best suited for single-page applications rather than multi-page websites. It can control the interface at each step. With Tourist, you can create a guide for the steps that need to open a window or menu. You can specify a series of steps using directives for specific elements.

Although there is no website, the 12K star GitHub page contains a lot of documentation.

Easelinc/touristTourist. Js address: github.com/easelinc/to…

How to install

You can install tourist.js using the following bower command:

bower install tourist
Copy the code

Tourist requires jQuery and Backbone and can be used with Bootstrap 3 Popovers or QTip2 tips with Bootstrap 3 CSS.

The tourist.js JavaScript file and optional CSS file can be used for custom styles.

<script src="tourist.js"></script>

<! -- Optional! -->
<link rel="stylesheet" href="tourist.css" type="text/css" media="screen">
Copy the code

How to use

After the initial setup, you can create steps and add them to the navigation instance, as shown below:

var steps = [{
  // this is a step object
  content: '
Hey user, check this out! 
'.highlightTarget: true.nextButton: true.target: $('#thing1'),
  my: 'bottom center'.at: 'top center'}, {... },... ]var tour = new Tourist.Tour({
  steps: steps,
  tipOptions: {showEffect: 'slidein'}}); tour.start();Copy the code

It also allows you to have a custom implementation of the prompt using touret.tip.

conclusion

Implementing guides and guides is an easy way to introduce users to the application. Most of these tools use CSS and JavaScript files with simple initialization capabilities. These tools are used by many top companies. The look and function of your guides and guides will depend on the library you choose, and proper navigation can make your application more intuitive and attractive to users.

Original text: blog. Bitsrc. IO / 7 – awesome – j…

If you have some inspiration and help, you can point to follow, collect, forward, also can leave a message to discuss, this is the biggest encouragement to the author.

About author: Web front-end engineer, full stack development engineer, continuous learner.

Public number reply: gift package, send a network quality video course network disk data, can save a lot of money for you!