(For more resources related to this topic, see here.)

API

IntroJs includes functions that let the user to control and change the execution of the introduction. For example, it is possible to make a decision for an unexpected event that happens during execution, or to change the introduction routine according to user interactions. Later on, all available APIs in IntroJs will be explained. However, these functions will extend and develop in the future. IntroJs includes these API functions:

• start
• goToStep
• exit
• setOption
• setOptions
• oncomplete
• onexit
• onchange
• onbeforechange

introJs.start()

As mentioned before, introJs.start() is the main function of IntroJs that lets the user to start the introduction for specified elements and get an instance of the introJS class. The introduction will start from the first step in specified elements.

This function has no arguments and also returns an instance of the introJS class.

introJs.goToStep(stepNo)

Jump to the specific step of the introduction by using this function. As it is clear, introductions always start from the first step; however, it is possible to change the configuration by using this function. The goToStep function has an integer argument that accepts the number of the step in the introduction.

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

As the example indicates, first, the default configuration changed by using the goToStep function from 1 to 2, and then the start() function will be called. Hence, the introduction will start from the second step.

Finally, this function will return the introJS class’s instance.

introJs.exit()

The introJS.exit() function lets the user exit and close the running introduction. By default, the introduction ends when the user clicks on the Done button or goes to the last step of the introduction.

introJs().exit()

As it shows, the exit() function doesn’t have any arguments and returns an instance of introJS.

introJs.setOption(option, value)

As mentioned before, IntroJs has some default options that can be changed by using the setOption method. This function has two arguments. The first one is useful to specify the option name and the second one is to set the value.

introJs().setOption("nextLabel", "Go Next");

In the preceding example, nextLabel sets to Go Next. Also, it is possible to change other options by using the setOption method.

introJs.setOptions(options)

It is possible to change an option using the setOption method. However, to change more than one option at once, it is possible to use setOptions instead. The setOptions method accepts different options and values in the JSON format.

introJs().setOptions({ skipLabel: "Exit", tooltipPosition: "right" });

In the preceding example, two options are set at the same time by using JSON and the setOptions method.

introJs.oncomplete(providedCallback)

The oncomplete event is raised when the introduction ends. If a function passes as an oncomplete method, it will be called by the library after the introduction ends.

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

In this example, after the introduction ends, the anonymous function that is passed to the oncomplete method will be called and alerted with the end of introduction message.

introJs.onexit(providedCallback)

As mentioned before, the user can exit the running introduction using the Esc key or by clicking on the dark area in the introduction. The onexit event notices when the user exits from the introduction. This function accepts one argument and returns the instance of running introJS.

introJs().onexit(function() {
  alert("exit of introduction");
});

In the preceding example, we passed an anonymous function to the onexit method with an alert() statement. If the user exits the introduction, the anonymous function will be called and an alert with the message exit of introduction will appear.

introJs.onchange(providedCallback)

The onchange event is raised in each step of the introduction. This method is useful to inform when each step of introduction is completed.

introJs().onchange(function(targetElement) {
  alert("new step");
});

You can define an argument for an anonymous function (targetElement in the preceding example), and when the function is called, you can access the current target element that is highlighted in the introduction with that argument. In the preceding example, when each introduction’s step ends, an alert with the new step message will appear.

introJs.onbeforechange(providedCallback)

Sometimes, you may need to do something before each step of introduction. Consider that you need to do an Ajax call before the user goes to a step of the introduction; you can do this with the onbeforechange event.

introJs().onbeforechange(function(targetElement) 
{  alert("before new step");
});

We can also define an argument for an anonymous function (targetElement in the preceding example), and when this function is called, the argument gets some information about the currently highlighted element in the introduction. So using that argument, you can know which step of the introduction will be highlighted or what’s the type of target element and more.

In the preceding example, an alert with the message before new step will appear before highlighting each step of the introduction.

Summary

In this article we learned about the API functions, their syntaxes, and how they are used.

Resources for Article:

---

Further resources on this subject:

• ASP.Net Site Performance: Improving JavaScript Loading [Article]
• Trapping Errors by Using Built-In Objects in JavaScript Testing [Article]
• Making a Better Form using JavaScript [Article]

---