This time I will share jQuery Plugin and tutorial about jQuery Feature Tours Plugin – Joyride, hope it will help you in programming stack.
| File Size: | 165 KB |
|---|---|
| Views Total: | 4268 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Joyride is a cool and mobile-friendly jQuery plugin for easily and quickly creating feature tours for your website or web application using small tooltips. You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.
Basic Usage:
1. Include necessary CSS files on your page
1 |
<link rel="stylesheet" href="joyride-2.0.3.css"> |
2 |
<link rel="stylesheet" href="mobile.css"> |
2. Markup an element with a unique ID to tell the plugin it is a stop of the tour
1 |
<h2 id="numero1" class="so-awesome">Point Out Those New Features!</h2> |
2 |
... |
3 |
<h3 id="numero2">Customize Each Stop Along the Way</h3> |
4 |
... |
3. Tip Content
1 |
<ol id="joyRideTipContent"> |
2 |
<li data-class="so-awesome" data-text="Next" class="custom"> |
3 |
<h2>Stop #1</h2> |
4 |
<p>...</p> |
5 |
</li> |
6 |
<li data-id="numero2" data-button="Next" data-options="tipLocation:top;tip<a href="https://www.jqueryscript.net/animation/">Animation</a>:fade"> |
7 |
<h2>Stop #2</h2> |
8 |
<p>...</p> |
9 |
</ol> |
4. Include necessary javascript files
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="jquery.cookie.js"></script> |
3 |
<script src="modernizr.mq.js"></script> |
4 |
<script src="jquery.joyride.js"></script> |
5. Call the plugin and done.
1 |
$('#joyRideTipContent').joyride({ |
2 |
postStepCallback : function (index, tip) { |
3 |
if (index == 2) { |
4 |
$(this).joyride('set_li', false, 1); |
5 |
} |
6 |
} |
7 |
}); |
6. All default options.
001 |
/** |
002 |
* Autostart the joyride on page load. |
003 |
* @option |
004 |
* @example false |
005 |
*/ |
006 |
autostart: false, |
007 |
008 |
/** |
009 |
* Speed with which the page scrolls to the next stop. |
010 |
* @option |
011 |
* @example 1000 |
012 |
*/ |
013 |
scrollSpeed: 1000, |
014 |
015 |
/** |
016 |
* Enable navigation via keyboard. |
017 |
* @option |
018 |
* @example true |
019 |
*/ |
020 |
keyboardAccess: true, |
021 |
022 |
/** |
023 |
* If the joyride elements should be closable. |
024 |
* @option |
025 |
* @example true |
026 |
*/ |
027 |
closable: true, |
028 |
029 |
/** |
030 |
* Text for the next button. |
031 |
* @option |
032 |
* @example 'Next' |
033 |
*/ |
034 |
nextText: 'Next', |
035 |
036 |
/** |
037 |
* Text for the previous button. |
038 |
* @option |
039 |
* @example 'Previous' |
040 |
*/ |
041 |
prevText: 'Previous', |
042 |
043 |
/** |
044 |
* Text for the close button (for accessibility purposes). |
045 |
* @option |
046 |
* @example 'Close' |
047 |
*/ |
048 |
closeText: 'Close', |
049 |
050 |
/** |
051 |
* Whether to show next button. |
052 |
* @option |
053 |
* @example true |
054 |
*/ |
055 |
showNext: true, |
056 |
057 |
/** |
058 |
* Whether to show previous button. |
059 |
* @option |
060 |
* @example true |
061 |
*/ |
062 |
showPrev: true, |
063 |
064 |
/** |
065 |
* Vertical offset for tooltips (see tooltip plugin configuration). |
066 |
* @option |
067 |
* @example true |
068 |
*/ |
069 |
vOffset: 10, |
070 |
071 |
/** |
072 |
* Horizontal offset for tooltips (see tooltip plugin configuration). |
073 |
* @option |
074 |
* @example true |
075 |
*/ |
076 |
hOffset: 12, |
077 |
078 |
/** |
079 |
* Offset while scrolling the window. |
080 |
* @option |
081 |
* @example 50 |
082 |
*/ |
083 |
scrollOffset: 50, |
084 |
085 |
/** |
086 |
* Position of the tooltips (see tooltip plugin configuration). |
087 |
* @option |
