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. If you want to highly customize your own tutorial trip, then Trip.js is definitely worth to give it a try !
3.1.0
Clone the latest version from Github directly
git clone git://github.com/EragonJ/Trip.js.git
Or install from Bower
bower install trip.js
Or install from npm
npm install trip.js
<link rel="stylesheet" type="text/css" href="//oss.maxcdn.com/jquery.trip.js/3.1.0/trip.min.css" />
<script src="//oss.maxcdn.com/jquery.trip.js/3.1.0/trip.min.js"></script>
-
include jQuery
-
include trip.min.css
-
include trip.min.js
-
setup trip codes shown below
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
Please check the setup and configuration here !
If you want to build your own Trip.js, you can check Gruntfile.js
for details.
All you have to do is to clone the whole repository and do npm install
to install all necessary modules !
If you are willing to contribute any commit for Trip.js, please follow the rule below :
- Create an issue talking about your change and let's discuss here.
- Assign yourself as assignee.
- fork Trip.js.
- put your changes into a commit !
- press
grunt build
to build all necessary files. Notes: You need to install compass (I am sorry because it is ruby based), node and npm first, and don't forget to pressnpm install
to install all needed building tools so that grunt can recognize it and help you minify js, compile jade and SCSS. - send a pull request to Trip.js and make sure put
fix #xxx
in your commit title. - make sure Travis is green and ping me :D
Although the rule is not forced to follow, it would be helpful for me to review code to make sure there is nothing missing and make the code base consistent.
Thanks for all your participations !!!
grunt test
(this will run all qunit tests)
grunt build
(this will do uglify
, sass
at the same time)
grunt html
(Because we use jade
, so you may need to compile first)
grunt doc
(This includes jsdoc
for source code and documentations)
Trip.js would detect following keys to do relative actions after loading it.
- Right and Down arrows - Go to next trip
- Left and Up arrows - Go back to previous trip
- Space - pause / resume trip
- Esc - Stop trip
- trip.start() - start your trip
- trip.stop() - stop your trip
- trip.pause() - pause / resume your trip ( same as trip.resume() )
- trip.resume() - pause / resume your trip ( same as trip.pause() )
- trip.next() - jump to next step
- trip.prev() - jump back to previous step
- Add data-x to define steps ( make the setup easier )
- Add UI for pause/play/stop to make users know how to interact
- Don't depend on jQuery
EragonJ ( [email protected] )
MIT
- Everyone who is engaged in this project.
- Animate.css