jQuery页面向导插件Pageguide使用例子

大家可能都有过这样的开发经验，用户无法真正的了解如何使用一个设计非常讲究并且功能非常炫酷的网站，这样的情况的确非常让人沮丧，即使是微软开发的office，也有同样的问题，现在的office使用就是一个迷宫游戏，永远无法第一眼找到自己需要的功能。

为了解决这样的问题，一个非常好的方案就是形象化的将功能区域有效的展示给用户，并且添加适当的功能说明。不过这样的功能自己开发起来可能相对比较麻烦，有没有更好的方式呢？

今天这里我们介绍一个不错的jQuery插件 - Pageguide.js，使用这个插件可以有效的帮助你生成网站使用的向导，用户可以很直观的了解网站的内容和相关功能使用，而作为网站来说，我们不需要自己开发相关功能，只需要整合pageguide到我们的网站即可。

使用Pageguide.js将会添加一个“向导”按钮到你的网站，当你点击它的时候，将会高亮显示我们需要说明的网页元素，并且附带部分的文字说明。你的用户可以很容易的了解如何使用这些功能。

主要特性

和页面内容不冲突
使用jQuery和CSS3来实现
使用简单，支持自动滚动
支持现代浏览器
如何使用
倒入类库及其CSS：

指定

来添加需要展示在页面上的使用向导：

添加如下javascript代码：

Getting Started

Download jQuery.PageGuide (TAR or Github) and put the files somewhere within your project resource path.
Include the CSS tag somewhere in the HEAD of the html:


...

...


Include the JS for jQuery and jQuery.PageGuide at the end of the BODY:


...




Heads up! The same jquery.pageguide.js file will also work with browser-based AMD script loaders, like RequireJS.
Create a guide. Guides can be defined in both html, by using ordered lists (OL's), and in JavaScript. Here we're going to build one in JavaScript (the same one that loads by default on this page):

var guide = {
id: 'jQuery.PageGuide',
title: 'Take a quick tour of all the possibilities',
steps: [
{
target: '.hero-unit h1',
content: 'Each step is associated with a "target" element, specified by a CSS selector. jQuery.PageGuide will automatically filter out any steps with targets that are invisible or don't exist..',
direction: 'left'
}
]
}

Then, as soon as you're ready (or as soon as jQuery is ready), load the guide. The friendly little help icon will slide into view at the top right of the page:

$(function() {
// Load the default guide!
$.pageguide(defaultGuide);
});

Heads up! Make sure to place this code somewhere after the script tags you added in step 3.
If you want to swap to a different guide, go right ahead:

// Something different
var guide2 = {...};

$.pageguide('load', guide2);

And when you're done with that guide, make it go away:

$.pageguide('unload');

Options

The default settings are good enough to get you started, but there are a ton of options to explore. jQuery.PageGuide allows you to configure settings both globally and for individual guides. Setting options globally will effectively modify the defaults, which can also be overriden when loading a guide for settings that apply only while it's loaded. Keep scrolling to find the full list of options.
Setting global options:

These overrides will apply to all guides that are loaded.

During initialization:

// Guide definition, as described above.
var guide = {...};

// Options to override
var options = {
defaultGuide: guide, // Load this guide as soon as the page is ready
autoAdvanceInterval: 10, // Advance to the next step after 10 seconds
pulse: false // Don't show the pulse animation when a new step is selected
...
}

// Initialize the plugin, the options will be merged with the defaults and apply to any guide loaded
$.pageguide(options);

After initialization:

// These options will be merged with the existing options, and apply to any guides that get loaded
$.pageguide('options', {
pulse: true, // Turn the pulse effect back on, it's rad
step: {
direction: 'right' // Change the default position of the floating step indicators
}
});

Setting options for a single guide:

These overrides will only apply to the guide being loaded.

// Guide definition, as described above.
var guide = {...};

// Options to override for this guide only
var options = {
autoAdvanceInterval: 10, // Advance through the guide at 10 second intervals
...
step: {
shadow: false // Disable the translucent box around the target element
}
}

// $.pageguide(); // Only necessary if you haven't already initialized the plugin
$.pageguide('load', guide, options);

API Reference

The two main ways to customize and control jQuery.PageGuide are the guide options, and functions to interact with the interface programmatically. Below you'll find the full list of what's available.
Options

Default Settings:

options: {
defaultGuide: "#pageGuide",
autoStart: true,
autoStartDelay: 0,
autoAdvanceInterval: null,
loadingSelector: null,
pulse: true,
events: {},
step: {
direction: 'left',
margin: {top: 100, bottom: 100},
shadow: true,
shadowPadding: '10px',
zIndex: null,
arrow: {
offsetX: 0,
offsetY: 0
},
events: {}
}
}

Configurable Options:

Name	Default	Possible Values	Description
Guide (options.*)
defaultGuide	none	String selector, jQuery selector, Object guide	CSS selector or guide definition object to load when $.pageguide is initialized without a guide as the first argument.
autoStart	true	true, false	Whether or not to focus on the first visible item immediately on open.
autoStartDelay	0	(int milliseconds)	Add a delay before automatically selecting the first visible item after the guide is opened.
autoAdvanceInterval	null	int seconds	Rotate through the visible steps at a regular interval while the guide is open.
loadingSelector	none	String selector, jQuery selector	The CSS selector for the DOM element used as a loading indicator. PageGuide will wait until this element is no longer visible before starting up.
pulse	true	true, false	Show an animated effect to further highlight the target element whenever a new step is selected. Requires the step shadow to be set to 'true'.
events	{}	Object {init, ready, load, unload, open, close, previous, next, step, resize, click} callback functions)	Convenience wrapper to specify guide-level event handlers. These events are bound on load, and automatically removed when the guide is unloaded.
Step (options.step.*)
direction	'left'	'top', 'right', 'bottom', 'left'	Position of the floating step number indicator in relation to the target element.
margin	{top: 100, bottom: 100}	Object {top, bottom} in px	Minimum distance the target element must be from top or bottom of the viewport. If the element is outside of this margin, the window will scroll to bring the element into view.
shadow	true	true, false	Render a transparent box around the current step's target element.
shadowPadding	'10px'	String padding, int padding	Applied to all sides of the shadow to pad the height and width around the target element.
zIndex	null	int z-index	Force the base z-index of the step, which is used when rendering the floating step number indicator and the shadow. If set to null, the target element's z-index is used. The shadow is rendered at a z-index of base + 1, and the floating step number indicator is base + 2.
arrow	{offsetX: 0, offsetY: 0}	Object {offsetX, offsetY} in px	Additional offset to apply to the floating step indicator to make fine adjustments to positioning.
events	{}	Object {show, hide, select, deselect} callbacks	Convenience wrapper to specify step-level event handlers. These events are bound to the individual step on load, and automatically removed when the guide is unloaded.