Today
we will learn that how to set up an introduction tour of web application for
first time user.
We
will use Bootstrap Tour for this purpose. Let’s do it:
Create
a folder of any name, say ‘Tour’. Create 2 sub folders inside it of name
‘Content’ and ‘Scripts’.
Put
two files inside Content folder - bootstrap.min.css and bootstrap-tour.min.css
Put
these files inside Scripts folder - bootstrap.min.js, bootstrap-tour.min.js
and jquery-1.10.2.min.js
Actually, creation of above folder is not
necessary, you can put the files directly in your folder. It is just for ease
of finding files.
Here I am taking three DIVs with separate
id and msg. you can take any control as per requirement.
Code is:
<html>
<head>
<title>Bootstrap
Tour </title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-tour.min.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Content/bootstrap-tour.min.js"></script>
<script type="text/javascript">
var tour
= new Tour({
steps:
[
{
element: "#div1",
title: "Div First",
content: "Content of my step-1"
},
{
element: "#div2",
title: "Div Second",
content: "Content of my step-2"
},
{
element: "#div3",
title: "Div Second",
content: "Content of my step-2"
}
]
});
tour.init();
$(document).ready(function () {
$('#btnStartTour').click(function () {
tour.start();
});
});
</script>
</head>
<body>
<div id="div1" style="border:1px solid blue;width:50%;">
This is
first div description
</div>
<br />
<div id="div2" style="border:1px solid blue;width:50%;">
This is
Second div description
</div>
<br />
<div id="div3" style="border:1px solid blue;width:50%;">
This is
Third div description
</div>
<input type="button" id="btnStartTour" value="Start
Tour" />
</body>
</html>
Description: btnStartTour is the id of button upon
which we will click to start tour. tour.start(); is used
to start the tour. Please have a look on
following figure.
According to the above description, you can
add more controls according to your need.
Note: When you will Run this code, the browser saves the details in
cache so you will not be able to see tour again. To see tour again, clear the
cache of browser then run code again.
For more on Tour, click Here
I hope it will work.
Output screens:
First Time
When click on Start Tour button
When Click on Next Button
Please leave comments or e-mail me for your
suggestions, feedback.
My you tube channel videos – Click Here
Happy Coding.
Rudra Pratap Singh
Software Engineer
No comments:
Post a Comment