jQuery仿Google和Facebook的用户向导功能插件-爱编程

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

来源：htmleaf 阅读：11 时间：2018-02-04 01:25

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

HTML结构

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

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

<html>
  <body>
    <div style="text-align:center;">
        <a id="demo" href="#" >Click Here<a>
    </div>
  </body>
</html>

JAVASCRIPT

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

<script type="text/javascript"> 
  $('#demo').click(function(){
    guiders.createGuider({
    attachTo: "#demo",
    buttons: [{name: "Got it",onclick:guiders.hideAll}],
    title: "Name of new feature goes here",
    description: "Description about feature goes here",       
    id: "tip",
    overlay: true,
    position:6,
    autoFocus:true
    }).show();
  });
</script>

当超链接被点击时，将创建一个用户向导。当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

<html>
<body>
<div style="text-align:center;">
    <a id="link1" href="#" >Demo 1<a>
    <a id="link2" href="#" >Demo 2<a>
</div>
</body>
</html>

JAVASCRIPT

<script type="text/javascript">     
    $('#link1').click(function(){
      guiders.createGuider({
        attachTo: "#link1",
        buttons: [{name: "Next"},{name: "Close"}],
        description: "Click next to move to the next element",
        id: "tip",
        next:"link2_tips",
        overlay: true,
        position:6,
        autoFocus:true,
        title: "Guiders can be used to walk through different UI elements"
    }).show();
            
      guiders.createGuider({
        attachTo: "#link2",
        buttons: [{name: "Back"},{name: "Close"}],
        description: "At each point you can provide description about the feature",
        id: "link2_tips",
        overlay: true,
        position:6,
        title: "Users can go back or stop the tour"
        });
      });
</script>

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

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

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

在线预览源码下载