jquery - Javascript tool for single-page applications guided tour - Stack Overflow

admin管理员组

文章数量:1344622

I saw once a javascript tool (jquery plugin maybe) to implement feature/guide tour functionality, unfortunately i haven't bookmarked the page.

It used an overlay and focused on document elements, based on id attributes probably.

Joyride or anything i have found googling does not support this.

Do you have anything in mind?

I saw once a javascript tool (jquery plugin maybe) to implement feature/guide tour functionality, unfortunately i haven't bookmarked the page.

It used an overlay and focused on document elements, based on id attributes probably.

Joyride or anything i have found googling does not support this.

Do you have anything in mind?

• javascript
• jquery
• web-applications
• jquery-plugins
• canvas

Share Improve this question Follow edited Jan 5, 2013 at 10:54 tsiokos asked Jan 5, 2013 at 10:23 tsiokostsiokos 1,09022 gold badges1010 silver badges2121 bronze badges 1

• 1 You should consider to use Sideshow, look this ment: stackoverflow./questions/14170855/… – Alberto Monteiro Commented Dec 17, 2014 at 15:50

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Sideshow is a modern and powerful library for creating interactive tours for web applications and sites.

More than just guiding your users, Sideshow can interact with them:

• Highlight the part you're talking about in each step (a form, div, image, field, and so forth), by masking the rest of the screen (Sideshow doesn't use the z-index approach for this, its mask isn't positionated behind the element, but really surrounds it).
• Monitor your user's behavior and the state of some screen.
• Create smart steps for your tutorials, which proceeds automatically when some condition is satisfied
• Create relationships between your tutorials, this way, when your user finishes some tutorial, a list with the related tours is shown.
• Use Markdown for rich formatting a step description
• Use events (e.g. beforeStep/afterStep, beforeWizardStarts/afterWizardEnds) to perform some preparation or anything else
• Show contextual tutorials according to the screen being viewed by your user, each tutorial has its own conditions to check if it's eligible for that screen or not

And other powerful features!

Intro.js is a Better introductions for websites and features with a step-by-step guide for your projects.

Features:

• Keyboard + Mouse navigation
• Fast & Small
• Browser Compatibllity
• Free & Open-Source

jquerypowertour. can highlight elements and a lot more. I have not used it, but it seems pretty powerful.

But I think something like the JoyRide or Guiders-JS could easily be modified to do in bination with jQuery Highlighter plugin - Demo

At this point in time, I would most likely choose Shepherd for this purpose. (Intro and Sideshow would be close runners up, though.)

The code is clean, it has nice default styling that is easy to replace, the put care into making it accessible and giving it keyboard support, and it integrates with several frameworks:

• React
• Angular
• Ember
• Vue
• Rails (through Abraham)
• probably others that I don't know about

and of course it also works with vanilla JS or ES modules.

Also, it doesn't require jQuery. Everything that does require jQuery seems so 2005.

本文标签： jqueryJavascript tool for singlepage applications guided tourStack Overflow