@@include('../views/src/_resources.html')
@@include('../views/src/_header.html')In Trip.js, we provide three three kind of options for developers to customize their own trips.
Note: Parser options is supported in version 3.0.0+
You can set tripIndex ( start from 0 ) to specific trip block at start.
Number
0
You can set which theme to use, now Trip.js support white, black, yeti and dark 4 themes.
String
'black'
Base HTML for tripBlock
String
An array contains base HTML of tripBlock
(Please check source code to know the default HTML)You can ask Trip.js go back to top when ended.
Boolean
false
You can set the basic zIndex for overlay if you want to expose elements.
Number
99999
You can decide where to be the container of the overlay.
String
'body'
You can decide to bind key events for trip navigations or not.
Boolean
true
You can enable animations on tripBlock.
Boolean
true
You can decide to add small close icon on each trip or not
Boolean
false
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.
Boolean
false
Toggle navigation buttons
Boolean
false
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)
Boolean
false
Every trip will be presented for 1 second (1000 ms) by default. Set this value to -1
will prevent auto-advancing and you must manually call trip.next()
.
Number
1000
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.
String
Step {{tripIndex}}
Label for the previous button.
String
'Back'
Label for the next button.
String
'Next'
Label for the finish button.
String
'Dismiss'
Animation that would be applied on the tripBlock.
String
'tada'
Determines if the user can go backwards. If set to a function it is called and the response is evaluated.
Boolean
true
Determines if the user can go forward. If set to a function it is called and the response is evaluated.
Boolean
true
You can set a callback function triggered when Trip.js starts.
Function
$.noop
You can set a callback function triggered when Trip.js ends.
Function
$.noop
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.
Function
$.noop
You can set a callback function triggered when each trip ends.
Note: for 3.1.0+, you can return a jQuery deferred object
within this function to make sure all needed works are done before switching to the next step (e.g. append needed element in DOM tree). But remember, because Trip.js will keep waiting until it is resolved, don't do some heavy works here, otherwise, users will feel disappointed about this waiting time.
Function
$.noop
You can set a callback function triggered when any trip is stopped.
Function
$.noop
You can set a callback function triggered when any trip is paused.
Function
$.noop
You can set a callback function triggered when any trip is resumed.
Function
$.noop
You can set a callback function triggered when any trip changes to another one.
Function
$.noop
You can set a callback function triggered when any trip is closed.
Function
$.noop
which selector is referenced in this step
String
(for late referring) or jQuery Object
0
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.
String
No default
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
, they are related to the screen (fixed in CSS), so you don't have to put sel in this case.
String
'n'
You can enable this option to expose your selected element in this trip.
Boolean
or String
(for late referring) or jQuery Object
false
If there is any specific trip that needs a customized Next button instead of the default one, you can set this variable to any jQuery Object and Trip.js will automatically bind a once-click event on it. When user clicking on it, the trip will be advanced to the next one.
Note: This normally happens when you want to interact with the user and ask them to click on special thing to make sure they do understand how to use something before going to the next trip.
jQuery Object
undefined
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Check documentations above.
Note : only support Boolean
and String
type here, no jQuery
object.