Yii is one of the best frameworks for PHP. If you're using this framework, you can easily use benefits of integration of Yii and IntroJs.
To use IntroJs, access application.extentions.introjs.IntroJs
in the Yii project using the widget command. This widget gets an array, that is, all steps of the introduction, and generates the client-side code for the introduction automatically.
In this sample, we have defined two steps for introduction, including Hello World
, and introID1
and introID2
as their IDs.
In each step, four identifiers can be defined:
id
: This defines each step's identity
step
: This determines each step's order
intro
: This determines each step's tool tip text
position
: This determines the tool tip's position. It can be top, right, bottom or left
In addition, this sample will to define two elements to start and finish the introduction; for example, it will to specify a link, which when clicked, starts or stops the introduction.
By setting the value of the start
parameter to true
, it is possible to start the custom element and determine an event for it; for example, the event can be onclick
.
Also, by setting the exit
parameter to true
, it is possible to determine the exit
element, for example:
By default, IntroJs has a simple style that can make a great harmony with your website design.
In this section, IntroJs styles will be explained, and the way to change the IntroJs elements' style and appearance will be learned.
To change IntroJs style, five main items should be changed. They are as follows:
Overlay
Tool tip
Buttons
Numbers
Highlight area
IntroJs has a stylesheet named introjs.css
that was downloaded before. To change your introduction style, create a new CSS file and overwrite the introjs.css
classes as you want. After that, include your own CSS file after the main CSS file in your page, as shown in the following example: