现在的位置: 首页 > web前端 > 正文

构建一个用于产品介绍的WEB应用

2020年02月12日 web前端 ⁄ 共 1409字 ⁄ 字号 评论关闭

为了让用户更好地了解您的产品功能,您在发布新产品或者升级产品功能的时候,不妨使用一个产品介绍的向导,引导用户熟悉产品功能和流程。本文将给您介绍一款优秀的用于产品介绍的WEB应用。

就像微博或邮箱这类WEB产品升级一样,使用Guiders.js构建的应用,用户将会看到一些列的弹出层,这些弹出层可以定位到页面上的任意位置,引导用户一步步浏览,最后退出向导。Guiders.js是一款基于jquery的web应用插件,作者是jeff-optimizely。下面我们来介绍如何在实际项目中应用。


准备

加入有一款WEB产品,需要向新用户做功能介绍,就要在首页先引入jquery库和guiders插件以及相关样式。

<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

以上就上有关构建一个用于产品介绍的WEB应用的相关介绍,要了解更多jQuery,web内容请登录学步园。

抱歉!评论已关闭.