JQuery-based page function Introduction Guide page example

When a new product is launched or upgraded, we will create a user guide to guide users in using the product for the first time. For example, we will introduce the functional modules on the interface one by one through demonstration, this improves the user experience and product affinity.
View demo download source code
There have been related articles: "Building a WEB application for product introduction", I believe it will be helpful to friends who need it. This article introduces another jQuery-based page boot page plug-in: pagewalkthrough. js to see how to use it.
HTML
First, remember to load the required css files and jQuery library files, as well as the pagewalkthrough plug-in.
 
<! -- CSS -->
<Link type = "text/css" rel = "stylesheet" href = "css/jquery.page?through.css"/>
 
<! -- JQuery -->
<Script type = "text/javascript" src = "jquery. min. js"> </script>
<! -- Page walkthrough plugin -->
<Script type = "text/javascript" src = "jquery. pagewalkthrough. min. js"> </script>

Next, we add the guiding content at the bottom of the page, that is, the content to be displayed in each step. By default, the content is hidden and will be called using jQuery.
 
<Div id = "walkthrough-content">
<Div id = "walkthrough-1">
<H3> Welcome to the Helloweba DEMO page  
<P> The page function introduces the effect of the boot page through a jQuery plug-in called pagewalkthrough. js. </P>
<P> click next to learn more... </p>
</Div>
 
<Div id = "walkthrough-2">
Here is the Helloweba website LOGO. Click here to go to the homepage of the website.
</Div>
 
<Div id = "walkthrough-3">
Click here to view the use tutorial of the plug-in.
</Div>
 
<Div id = "walkthrough-4">
Click here to download the source code for free ..
</Div>
 
<Div id = "walkthrough-5">
This is the footer and copyright information.
</Div>
</Div>

The guided content supports html content. You can add links, images, and other information to the content. In addition, the arrow images required for the boot page have been packaged and called directly using css. For fonts, you can call external fonts, such as handwritten fonts, which may have better results.
JQuery
You can add the following code at the bottom of the page to call pagewalkthrough. The key option steps is an array that defines the content of each step of bootstrap call. The wrapper parameter defines the element location corresponding to the current bootstrap, the popup parameter defines the pop-up prompt guide layer. The parameter content defines the associated content elements. The parameter type defines the pop-up mode, including tooltip, modal, and nohighlight. The parameter position defines the position of the pop-up layer, including top, left, right or bottom.
 
$ (Function (){
$ ('Body'). pagewalkthrough ({
Name: 'insert ',
Steps :[{
Popup :{
Content: # walkthrough-1 ',
Type: 'modal'
           }
},{
Wrapper: '# logo ',
Popup :{
Content: # walkthrough-2 ',
Type: 'tooltip ',
Position: 'bottom'
            }
},{
Wrapper: 'h2. top_title ',
Popup :{
Content: # walkthrough-3 ',
Type: 'tooltip ',
Position: 'bottom'
            }
},{
Wrapper: 'A [href = "/down-286.html"] ',
Popup :{
Content: # walkthrough-4 ',
Type: 'tooltip ',
Position: 'right'
            }
},{
Wrapper: '# footer P ',
Popup :{
Content: # walkthrough-5 ',
Type: 'tooltip ',
Position: 'top'
            }
}]
});
 
// Show the tour
$ ('Body'). pagewalkthrough ('Show ');
});
Save and run the command to see the effect you want. Pagewalkthrough. the js plug-in officially provides many parameter configurations, including setting the pop-up layer width, scroll speed, whether to automatically scroll, locking the scroll, multiple callback functions, defining the next button in the previous step, and calling methods, these articles are not described