就像微博或邮箱这类WEB产品升级一样，使用Guiders.js构建的应用，用户将会看到一些列的弹出层，这些弹出层可以定位到页面上的任意位置，引导用户一步步浏览，最后退出向导。Guiders.js是一款基于jquery的web应用插件，作者是jeff-optimizely。下面我们来介绍如何在实际项目中应用。
准备
加入有一款WEB产品，需要向新用户做功能介绍，就要在首页先引入jquery库和guiders插件以及相关样式。
为了让用户更好地了解您的产品功能，您在发布新产品或者升级产品功能的时候，不妨使用一个产品介绍的向导，引导用户熟悉产品功能和流程。本文将给您介绍一款优秀的用于产品介绍的WEB应用。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="guiders-1.1.5.js"></script> <link rel="stylesheet" type="text/css" href="guiders-1.1.5.css" />
应用
调用guiders插件，创建一个弹出层向导，设置相关属性，代码如下：
<script type="text/javascript">
guiders.createGuider({
buttons: [{name: "继续", onclick: guiders.next}],
description: "内容介绍",
id: "first",
next: "second",
overlay: true,
title: "Helloweba.com欢迎您！"
}).show();
</script>如果要创建多个弹出层，可以复制多个以上代码，通过使用id和next属性来关联多个层的弹出顺序。
说明
Guiders提供了多个属性参数设置，以下是常用的属性说明：
attachTo：弹出层关联的html元素。
buttons：{name: "",onclick:function}，设置按钮，name：按钮名称，onclick：单击按钮调用的方法，提供两个方法可以调用，guiders.hideAll：关闭弹出层，guiders.next：继续下一步。
buttonCustomHTML：可以自定义按钮层的html内容。
description：弹出层主体内容，支持html标签。
id：设置当前层的id。
next：设置下一个弹出层的id。
offset：设置弹出层的相对位移，如：{ left:0, top: -10 }
overlay：是否使用遮罩层，如果设置为true，则会在弹出层和底层之间有一个灰色的层显示。
position：弹出层的显示位置（必需先指定attachTo），Guiders使用时钟定位，如position值为12，则意思为12点钟方向，指正上方。
title：设置弹出层显示的标题。
width：设置弹出层的宽度，默认为400px。
xButton：如果设置为true，则会在弹出层的右上角显示一个x，可以点击x关闭层。
如果您想了解更多关于Guiders的信息，请访问作者jeff-optimizely的项目地址：https://github.com/jeff-optimizely/Guiders-JS
评论回复