25+个免费的jQuery插件实现网站操作使用向导
1 – intro.js
Intro.js is a simple and fast javascript plugin for creating better introductions to websites and features with step-by-step guides with keyboard and mouse support.
2 – Website Tour with jQuery
A little script that allows to create a tour on a website with jQuery. This can be very useful if you want to explain your users the functioning of your web application in an interactive way.
3 – jquery joyride feature tour plugin
Joyride is extremely flexible and lets you take control of how people interact with your tour. We programmed it to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images. Now let’s see just how easy it is to take your first ride without getting the fuzz involved.
4 – Bootstro.js
Bootstro.js is a tiny JS library taking advantage of bootstrap’s popover to help guide your users around.
5 – jQuery myTour plugin
Mytour is a simple jQuery plugin used to create an interactive visual tour for your website to let your visitors learn about new features and functions.
6 – Crumble
Crumble allows you to quickly and easily build feature tours for your website or app using small bubbles!
The bubbles are visually interesting, will draw attention and due to the small size make sure that you will write using concise language that visitors will read.
The tour itself is defined as a standard ordered list in your html, making it accessible.
7 – Trip.js
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.
8 – FAQtoid
FAQtoid is a simple free all-in-one help system for your website or web application. It reduces your support costs by giving visitors the tools to help themselves.
- FAQ with Live Search
Users see answers as they type. - Tours
Walk users through the parts of each page. - Video Gallery
Users can watch videos while staying on the webpage that a video explains. - Smart Email Form
Handles crazy and junk messages. Automatically includes detailed information about your user, what they were trying to do, and any errors on the page.
9 – jQuery Tour Bus
A tour/walkthrough plugin for developers. It includes limited automatic behavior, more like a ‘toolkit’ than some of the others out there.
10 – Feature Walkthrough
A JS plugin to add a feature walkthrough on your web page.
You can position the walkthrough callouts to appear on the right,left,top or bottom of the element you are describing. For the left/right position, give the width of the element. This positions the callout exactly the way you want it. Similarily, give the height of the element when using the top/bottom positioning of the callout. Future features, include a complete customization of the look & feel of the callouts.
11 – chaperone.js
Chaperone is a simple jQuery plugin for doing guided tours through a website. Inspired by Joyride, Chaperone takes a list of items and uses them as a guide to show messages on targetted elements.
12 – Hopscotch
Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress.
13 – pageguide.js
pageguide.js is an interactive visual guide to elements on web pages. Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions.
14 – aSimple Tour Plugin
aSimpleTourPlugin is a jQuery plugin that will help you to make website tours. While a floating box helps managing the tour, tooltips (that can be positioned however wanted) help focusing on the elements.
15 – Bootstrap Tour
This jQuery site tour plugin loads the content inside Bootstrap Popovers. Tour steps + the content are both defined in JavaScript and it has lots of options to customize the behavior.
16 – TourTip – jQuery Overlay Tour
TourTip is a simple library for creating guided tours through your application. It’s better suited to complex, single-page applications than websites. Our main requirement was the ability to control the interface for each step. For example, a step might need count seconds before moving to the next step, or wait for the user to complete a task. TourTip gives you the ability to manage these parameters all at once or for each step separately.
17 – jQuery Tour
TourJS is a jQuery plugin for creating beautiful tours. Items are pulled out of the page, you can require an action from the user before moving to the next step of the tour, and TourJS will automatically scroll to hidden items.
18 – Website tours with jQuery UI
Lets you build website tours by providing tools to expose or annotate elements, also can step through a tour or run it automatically.
19 – Bon Vojage
Bon Vojage is a tiny JQuery plugin that makes your cross-website tour simple!
20 – ddTour
A simple uncomplicated lightweight site tour jQuery solution created by David Davis.
- Unlike other tour solutions you keep your code in one place. The tooltip pops up right where you have a description of it.
- Traverse to any element by designated class selector
- This is a simple grunt stupid solution as they say in the Marine Corps.
21 – quicktour.js
Quicktour.js uses an iterative loop to highlight each tour item in the order you add them. A dark frame will appear over the website, showing a title (if specified), and the tour will progress with each click.
22 – jQuery Tour
My simple implementation of a Tour plugins out there.
- I am relying on absolute positioned divs. These placeholders are to injected dynamically into DOM.
- With every click, the DOM is 1st cleared of all the elements and then a dynamically created element has to be placed dynamically as positioned by the CSS class.
- Takes an array of JSON objects containing the TITLE and DESCRIPTION of the placeholder. The array order determines the order of the placeholders to be displayed.
23 – lightsOff.js
A lightweight JQuery plugin (6kb minified) to show nice guided introductions of various elements on your page.
24 – usertour.js
It’s a jQuery widget for web applications that want to offer a step by step tour to their users.
25 – VTour.js
A jQuery library used for designing help pages for your website. Gives the user a guided walk through of your webpage and it’s functions.
26 – jquery-guide
A jQuery plugin that new layout or new features using guide
27 – Concierge
Concierge is jQuery plugin that creates a walkthrough guide for use in educating users about stuff on the page. It basically just lets you set up a bunch of popovers that fire in order.
28 – anno.js
Anno.js lets you add powerful step-by-step guides to your web-apps
29 – EnjoyHint
A free web-tool that is created to prompt users to navigate a website or an app intuitively and easily. It gives an excellent way to create interactive tutorials with hints and embed them into your web apps, thus, enhancing their usability and value/effectiveness.