大家可能都有過這樣的開發經驗，使用者無法真正的瞭解如何使用一個設計非常講究並且功能非常炫酷的網站，這樣的情況的確非常讓人沮喪，即使是微軟開發的office，也有同樣的問題，現在的office使用就是一個迷宮遊戲，永遠無法第一眼找到自己需要的功能。
為瞭解決這樣的問題，一個非常好的方案就是形象化的將功能區域有效展示給使用者，並且添加適當的功能說明。不過這樣的功能自己開發起來可能相對比較麻煩，有沒有更好的方式呢？
今天這裡我們介紹一個不錯的jQuery外掛程式 - Pageguide.js，使用這個外掛程式可以有效協助你產生網站使用的嚮導，使用者可以很直觀的瞭解網站的內容和相關功能使用，而作為網站來說，我們不需要自己開發相關功能，只需要整合pageguide到我們的網站即可。
使用Pageguide.js將會添加一個“嚮導”按鈕到你的網站，當你點擊它的時候，將會高亮顯示我們需要說明的網頁元素，並且附帶部分的文字說明。你的使用者可以很容易的瞭解如何使用這些功能。
主要特性
和頁面內容不衝突
使用jQuery和CSS3來實現
使用簡單，支援自動滾動
支援現代瀏覽器
如何使用
倒入類庫及其CSS：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="javascripts/pageguide.js"></script>
<link rel="stylesheet" href="stylesheets/pageguide.css">
指定<ul>來添加需要展示在頁面上的使用嚮導：
添加如下javascript代碼：
<script type="text/javascript">
$(document).ready(function() {
tl.pg.init();
})
</script>
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:
<head>
...
<link href="/path/to/css/pageguide.css" rel="stylesheet">
...
</head>
Include the JS for jQuery and jQuery.PageGuide at the end of the BODY:
<body>
...
<script src="/path/to/js/jquery.js"></script>
<script src="/path/to/js/jquery.pageguide.js"></script>
</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. |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
