This time I will share jQuery Plugin and tutorial about jQuery Plugin To Create Guided Website Feature Tours – PageIntro.js, hope it will help you in programming stack.
| File Size: | 10.7 KB |
|---|---|
| Views Total: | 2046 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
PageIntro.js is a lightweight jQuery plugin for highlighting DOM elements and creating step-by-step interactive tours to introduce new features and recommended content on your web app.
How to use it:
1. Load the stylesheet pageintro.css to style the guided tours.
|
1 |
<link href="dist/pageintro.css" rel="stylesheet"> |
2. Create the DOM elements you want to highlight.
|
1 2 3 |
<h1 id="step1">This is step 1</h1> <p id="step2">This is step 2</p> <p id="step3">This is step 3</p> |
3. Load jQuery library and the jQuery PageIntro.js script at the bottom of the webpage.
|
1 2 |
<script src="//code.jquery.com/jquery.min.js"></script> <script src="dist/pageintro.js"></script> |
4. Add custom website tours in the JavaScript as these.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
var options = { container: 'body', spacing: 20, actions: { next: { text: 'Next step', class: 'btn btn-default' }, finish: { text: 'OK! I know', class: 'btn btn-success' } }, entries: [ { selector: '#step1', text: 'You know, this is title' }, { selector: '#step2', text: 'This is description' }, { selector: '#step3', text: 'This is example text', onEnter: function () { $('#step3').text('Good job!'); }, onExit: function () { $('#step3').text('This example text is changed!'); } } ] }; |
5. Initialize the plugin and start the tour on page load.
|
1 2 |
PageIntro.init(options); PageIntro.start(); |
This awesome jQuery plugin is developed by lc-soft. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
