YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

这是一款非常实用的jQuery仿Google和Facebook的用户向导功能插件。使用该该插件，你需要在Html头部引入jQuery、Guiders.js和Guiders.css文件。

HTML结构

我们可以使用超链接、按钮和文本框来触发用户向导功能。在这里使用的是超链接，当点击了“Click Here”将触发用户向导功能的tooltips。

jQuery仿Google和Facebook的用户向导功能插件-1

JAVASCRIPT

当点击了“Click Here”将使用jQuery为它附加触发事件：

当超链接被点击时，将创建一个用户向导。当guiders.js 文件被调用的时候，用户向导被创建，它是一个对象，包含了所有创建不同类型用户向导所需的函数和变量。你可以直接使用这个对象。我们使用createGuider方法创建一个用户向导，并通过以下参数来定制tooltips效果，这些参数如下：

  • attachTo：（可选）该参数定义你希望用于触发用户向导的html元素。
  • buttons：一个按钮数组对象。 
    {
name: "Close",
onclick: 按钮点击后的回调函数
(如果 name 是 "close", "next", or "back", onclick 默认分别为 guiders.hideAll, guiders.next, 或 guiders.prev )
}
  • title：用户向导的title。
  • description：你希望显示在用户向导中的文本。
  • overlay：（可选）如果为true，则会弹出遮罩层。
  • position：（可选）用户向导出现的位置，可以用时钟的位置表示，例如“topLeft”是11点钟方向，“bottom”是6点钟方向。
  • autoFocus：（可选）如果你想浏览器自动滚动到向导出现的地方，设置为true。

我们也可以使用show()方法来显示用户向导，默认用户向导是全部隐藏的。

如果你想页面加载后直接显示用户向导，可以直接调用createGuider方法创建用户向导对象。

如上所述，你可以通过参数很容易的改变用户向导的位置、title、内容等。爷爷可以为向导内容使用html标签、图像、列表等等。它们会在向导显示时被正确格式化。

还有一些其他的参数，你可以在这里找到它们：https://github.com/jeff-optimizely/Guiders-JS。

CSS样式

插件中的CSS样式采用统一的、最简单的CSS样式。你可以通过Guiders.css文件自行修改tooltips的样式。

现在让我们来看一下如何在两个向导tooltips之间切换。在下面的例子中，创建了两个链接和两个向导tootlips。当点击第一个链接你可以看到第一个用户向导对话框，当点击对话框上的按钮你可以看到下一个用户向导对话框。

jQuery仿Google和Facebook的用户向导功能插件-2

HTML
JAVASCRIPT

上面使用createGuider 函数创建了两个用户向导。它们是在超链接（id=link1）被点击时创建的，createGuider 函数只能每次创建一个用户向导，要创建两个，你需要调用两次。然后，使用show()函数来显示第一个用户向导。这时，其他的用户向导式被隐藏的。

上面的大部分参数都以做过说明，除了下面两个参数：

  • id：用户向导的id。它被用于在导航过程中识别用户向导。
  • next：该参数包含当点击按钮时下一次显示的用户向导的ID。