JS Tutorial
- Overview
- Documents
Trip.js is a jQuery plugin that can help you customize a tutorial trip easily with more flexibilities. Right now Trip.js support lots of useful stuffs like keyboard binding, animations, changing themes ... etc.
Source: eragonj.github.io
1. INCLUDE CSS AND JS FILES
<link type="text/css" rel="stylesheet" href="src/trip.min.css"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="src/trip.min.js"></script>
2. HTML
<div id="element1">...</div> <div id="element2">...</div>
3. JAVASCRIPT
var trip = new Trip([
{
sel : $('#element1'),
content : 'This is element 1'
},
{
sel : $('#element2'),
content : 'This is element 2'
}
], options); // details about options are listed below
$(document).ready(function(){
trip.start();
});
4. GLOBAL OPTIONS
-
tripIndex
You can set tripIndex ( start from 0 ) to specific trip block at start.
Type :Number
Default :0
-
tripTheme
You can set which theme to use, now Trip.js support white, black, and yeti three themes.
Type :String
Default :'black'
-
tripBlockHTML
Base HTML for tripBlock
Type :String
Default :An array contains base HTML of tripBlock
-
backToTopWhenEnded
You can ask Trip.js go back to top when ended.
Type :Boolean
Default :false
-
overlayZindex
You can set the basic zIndex for overlay if you want to expose elements.
Type :Number
Default :99999
-
enableKeyBinding
You can decide to bind key events for trip navigations or not.
Type :Boolean
Default :true
-
enableAnimation
You can enable animations on tripBlock.
Type :Boolean
Default :true
-
showCloseBox
You can decide to add small close icon on each trip or not
Type :Boolean
Default :false
-
showHeader
If you want to show no matter with default or customized header, you have to set this value to true. You can check header option for more details.
Type :Boolean
Default :false
-
showNavigation
Toggle navigation buttons
Type :Boolean
Default :false
-
skipUndefinedTrip
You can enable this option to tell Trip.js skip undefined trips (Undefined trips mean the trips without content or without sel or can not be selected by jQuery)
Type :Boolean
Default :false
-
delay
every trip will be lived for 1 second (1000 ms) by default
Setting to a -1 will prevent auto-advancing. You must manually call trip.next().
Type :Number
Default :1000
-
header
This is the header for each trip. You can customize your own if you don't want to use default one. You can put {{tripIndex}} and{{tripTotal}} in the title to notify users about the number of trips and current index of trip. Later when rendering, Trip.js will replace them with right information.
Type :String
Default :Step {{tripIndex}}
-
prevLabel
Label for the previous button.
Type :String
Default :'Back'
-
nextLabel
Label for the next button.
Type :String
Default :'Next'
-
finishLabel
Label for the finish button.
Type :String
Default :'Dismiss'
-
animation
Animation that would be applied on the tripBlock.
Type :String
Default :'tada'
-
canGoPrev
Determines if the user can go backwards. If set to a function it is called and the response is evaluated.
Type :Boolean
Default :true
-
canGoNext
Determines if the user can go forward. If set to a function it is called and the response is evaluated.
Type :Boolean
Default :true
-
onStart()
You can set a callback function triggered when Trip.js starts.
Type :Function
Default :$.noop
-
onEnd()
You can set a callback function triggered when Trip.js ends.
Type :Function
Default :$.noop
-
onTripStart(tripIndex, tripObject)
You can set a callback function triggered when each trip starts. tripObject is your passed JSON for this current trip, and tripIndex is the index for current trip. You can add add your customized functions in your object and call them when this callback is called.
Type :Function
Default :$.noop
-
onTripEnd(tripIndex, tripObject)
You can set a callback function triggered when each trip ends.
Type :Function
Default :$.noop
-
onTripStop(tripIndex, tripObject)
You can set a callback function triggered when any trip is stopped.
Type :Function
Default :$.noop
-
onTripPause(tripIndex, tripObject)
You can set a callback function triggered when any trip is paused.
Type :Function
Default :$.noop
-
onTripResume(tripIndex, tripObject)
You can set a callback function triggered when any trip is resumed.
Type :Function
Default :$.noop
-
onTripChange(tripIndex, tripObject)
You can set a callback function triggered when any trip changes to another one.
Type :Function
Default :$.noop
-
onTripClose(tripIndex, tripObject)
You can set a callback function triggered when any trip is closed.
Type :Function
Default :$.noop
5. LOCAL OPTIONS
You can setup specific options for each step.
-
sel
Which selector is referenced in this step.
Type :String(If your element is not present in DOM tree when initialization) orjQuery Object
Default :No default
-
header
Please check the same part in global options.
-
showHeader
Please check the same part in global options.
-
content *Required*
What information that you want to show to users. You can put {{tripIndex}} and {{tripTotal}} in the content to notify users about the number of trips and current index of trip. Later when rendering, Trip.js will replace them with right information.
Type :String
Default :No default
-
position
What position would you prefer for the tripBlock. We support 9 different positions : e, w, n, s, screen-ne, screen-se, screen-sw, screen-nw, screen-center.
To be clear, e, w, n, s are related to the sel, so for this use case, sel is required. For screen-ne, screen-se, screen-sw, screen-nw and screen-center are related to the screen (fixed in CSS), so in this case, you don't have to put sel.
Type :String
Default :'n'( You can use e, w, n, s, screen-ne, screen-se, screen-sw, screen-nw, screen-center 9 positions )
-
delay
You can delay longer / shoter for this step. You can assign delay in global options to change the default delay. Setting to a -1 will prevent auto-advancing. You must manually call trip.next() .
Type :Number
Default :1000
-
callback
You can do whatever you want to do after this step passed. BTW, Trip.js will assign the current tripIndex (start from 0) as the first parameter back to your callback function for later use.
Type :Function
Default :$.noop
-
expose
You can enable this option to expose your selected element in this trip.
Type :Boolean
Default :false
-
canGoPrev
Please check the same part in global options.
-
canGoNext
Please check the same part in global options.
-
animation
Please check the same part in global options.
-
showNavigation
Please check the same part in global options.
-
showCloseBox
Please check the same part in global options.
-
prevLabel
Please check the same part in global options.
-
nextLabel
Please check the same part in global options.
-
finishLabel
Please check the same part in global options.
-
onTripStart(tripIndex, tripObject)
Please check the same part in global options.
-
onTripEnd(tripIndex, tripObject)
Please check the same part in global options.
-
onTripStop(tripIndex, tripObject)
Please check the same part in global options.
-
onTripPause(tripIndex, tripObject)
Please check the same part in global options.
-
onTripResume(tripIndex, tripObject)
Please check the same part in global options.
-
onTripChange(tripIndex, tripObject)
Please check the same part in global options.
-
onTripClose(tripIndex, tripObject)
Please check the same part in global options.
6. KEY BINDING
-
Right and Down arrows
Go to next trip
-
Left and Up arrows
Go back to previous trip
-
Space
pause / resume
-
Esc
Stop
7. API
-
trip.start()
Call this method to start your trip
-
trip.stop()
Call this method to stop your trip
-
trip.pause()
Call this method to pause your trip (same as trip.resume)
-
trip.resume()
Call this method to continue your trip (same as trip.pause)
-
trip.next()
jump to next step
-
trip.prev()
jump back to previous step
