What is Trip.js ?

Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities. ( Based on jQuery )

Version

1.2.3

Setup ( Minimal )

1. Include your jQuery
2. Include src/trip.css
3. Include src/trip.js
4. Setup Trip.js
5. Take a Trip Now !

Global Options

1. tripIndex

   You can set tripIndex ( start from 0 ) to specific trip block at start.

   Default : 0

2. tripTheme

   You can set which theme to use, now have white and black two themes.

   Default : black

3. backToTopWhenEnded

   You can ask Trip.js go back to top when ended.

   Default : false

4. overlayZindex

   You can set the basic zIndex for overlay if you want to expose elements.

   Default : 99999

5. enableKeyBinding

   You can decide to bind key events for trip navigations or not.

   Default : true

6. showCloseBox

   You can decide to add small close icon on each trip or not

   Default : false

7. 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 ).

   Default : false

8. 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().

   Default : 1000

9. showNavigation

   Toggle navigation buttons

   Default : false

10. prevLabel

    Label for the previous button.

    Default : Back

11. nextLabel

    Label for the next button.

    Default : Next

12. finishLabel

    Label for the finish button.

    Default : Dismiss

13. canGoPrev

    Determines if the user can go backwards. If set to a function it is called and the response is evaluated.

    Default : true

14. canGoNext

    Determines if the user can go forward. If set to a function it is called and the response is evaluated.

    Default : true

15. onTripStart()

    You can set a callback function triggered when Trip.js starts.

    Default : $.noop

16. onTripEnd()

    You can set a callback function triggered when Trip.js ends.

    Default : $.noop

17. onTripStop()

    You can set a callback function triggered when Trip.js stops.

    Default : $.noop

18. onTripChange(tripIndex, tripObject)

    You can set a callback function triggered when Trip.js changes to another step. tripObject is your passed JSON for this current trip, so you can add your customized functions in your object and call the function when Trip.js changes to this step.

    Default : $.noop

Local Options

You can setup specific options for each step.

1. sel *Required*

   Which selector is referenced in this step.

   Default : no default

2. content *Required*

   What information that you want to show to users.

   Default : no default

3. position

   What position would you prefer for the tripBlock.

   Default : n( You can use e, w, n, s four positions )

4. 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() .

   Default : 1000

5. 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.

   Default : $.noop

6. expose

   You can enable this option to expose your selected element in this trip.

   Default : false

7. showNavigation

   Toggle navigation buttons

   Default : false

8. showCloseBox

   You can decide to add small close icon on each trip or not

   Default : false

9. prevLabel

   Label for the previous button.

   Default : Back

10. nextLabel

    Label for the next button.

    Default : Next

11. finishLabel

    Label for the finish button.

    Default : Dismiss

12. canGoPrev

    Determines if the user can go forward. If set to a function it is called and the response is evaluated.

    Default : true

13. canGoNext

    Determines if the user can go forward. If set to a function it is called and the response is evaluated.

    Default : true

Key Binding

1. Right and Down arrows

   Go to next trip

2. Left and Up arrows

   Go back to previous trip

3. Space

   pause / resume

4. Esc

   Stop

API

1. trip.start()

   Call this method to start your trip

2. trip.stop()

   Call this method to stop your trip

3. trip.pause()

   Call this method to pause your trip (same as trip.resume)

4. trip.resume()

   Call this method to continue your trip (same as trip.pause)

5. trip.next()

   jump to next step

6. trip.prev()

   jump back to previous step