Bootstrap Guide: The Virtual Tour Library
Introducing a Virtual Tour Library (using TW Bootstrap)
With This Library You Can:
- Apply an overlay to a web page, navigating a user through the pages functions.
- Start the virtual tour via javascript invocation or with a hashtag #vtour in the url.
- Help a user understand your page in a simple and affective way.
- Twitter Bootsraps Modal and Popover Javascript and stylins.
- jQuery 1.7
Screen Shots
VGUIDE
Demo
Another open source project, Bootstrap Admin Theme uses the tour library. Live demos are provided for each tour type.Quick Start
Create an html file with the virtual tour's directions.An Example Tour File
<html>
<body>
<div display="modal">
<h4>Virtual Tour</h4>
<p>
This is an example virtual tour on a page requiring you to change your password.
<br/>You will be:
</p>
<ul>
<li>
Entering and Verifying a New Password
</li>
</ul>
</div>
<div display="popover" field="current-pass-control">
<p>
First, lets enter your current password.
</p>
</div>
<div display="popover" field="new-pass-control">
<p>
Now create a new password.
</p>
</div>
<div display="popover" field="new-pass-verify-control" placement="top">
<p>
Verify your password.
</p>
</div>
<div display="modal">
<h4>Thank You!</h4>
<p>You have succesfully changed your password</p>
</div>
<div display="popover" field="submit-button">
<p>
Go ahead and submit your changes!
</p>
</div>
</body>
</html>
- Start the Virtual Tour from javascript
//Instantiate a Virtual Tour with the url to the tours instructions
var vTour = new VTour("/domain/vtour/page-tour-guide.html");
//start the tour
vTour.tour();
- Start the tour, but only on html tags with id's
'user-name-input', 'user-password-input', 'submit-button'
//Instantiate a Virtual Tour with the url to the tours instructions
var vTour = new VTour("/domain/vtour/page-tour-guide.html");
//start the tour
vTour.tour({'user-name-input', 'user-password-input', 'submit-button'});
- Start the tour by communication from the server.
example: http://mysit.com/domain/page#vtour
How This Works (API)
First:Any page that wants to define a virtual tour for its page must have the variable
pageVTourUrl defined in the body tag, or a childs tag.
(This allows the VTour to pick up the url when the hashtag #vtour is appended to the page url)EXAMPLE:
<body>
<div id="container" pageVTourUrl="/domain/vtour/page-tour-guide.html">{...}</div>
</body>
The VTour Guide Page:
Say you want to create a VTour guide for a webpage that contains a form. In this case your tour page would contain, in order, a div for each field on that page and a description of the purpose or use of that field, or directions on how to fill in/edit/update that field or area on the page.
Each div tag has two attributes:
-
displayspecifies the display type; popover or a modal. -
fieldspecifies the id of the html element popover or modal is associated with. This means that any field that has a purpose in the virtual tour, needs to have an "id" attribute set. -
placementis an optional attribute for popovers. This gives you control on where the popover should be placed (left, right, top, bottom) in association to the field it is designed for.
EXAMPLE:
<div display="popover" field="userName-input"><p>Enter your user name</p></div>
The vtour.js should go paragraph by paragraph reading in the vtour document. When it hits a paragraph, it will locate the given field id on the page. It will highlight the field and display a popover on the field with the paragraphs text. In the popover, at the bottom displays the text: "Press Enter or Tab to continue". Once the tour is complete, the tour will fall off the page, and the user may continue traditional operations.
Fork Or Download Project On Github
Comments
Post a Comment