构建一个用于产品介绍的WEB应用
为了让用户更好地了解您的产品功能,您在发布新产品或者升级产品功能的时候,不妨使用一个产品介绍的向导,引导用户熟悉产品功能和流程。本文将给您介绍一款优秀的用于产品介绍的WEB应用。
准备
加入有一款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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Guiders, 产品介绍" /> <meta name="description" content="Helloweba演示平台,演示XHTML、CSS、jquery、PHP案例和示例" /> <title>演示:构建一个用于产品介绍的WEB应用</title> <script type="text/javascript" src="../js/my.js"></script> <script type="text/javascript" src="guiders-1.1.5.js"></script> <link rel="stylesheet" type="text/css" href="../css/main.css" /> <link rel="stylesheet" type="text/css" href="guiders-1.1.5.css" /> <style type="text/css"> #demo{width:400px; height:200px; line-height:200px; margin:100px auto; border:1px solid #d3d3d3; background:#f7f7f7; font-size:24px; text-align:center; color:#999} </style> </head> <body> <div id="main"> <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-148.html">构建一个用于产品介绍的WEB应用</a></h2> <div id="demo">DEMO</div> </div> <script type="text/javascript"> guiders.createGuider({ buttons: [{name: "继续", onclick: guiders.next}], description: "你好,你现在看到的是一款可以向用户介绍新产品等信息的WEB应用的演示,该应用基于jQuery,能够为你的WEB产品增加更好的用户体验。", id: "first", next: "second", overlay: true, title: "Helloweba.com欢迎您!" }).show(); guiders.createGuider({ attachTo: "#header", buttons: [{name: "关闭", onclick: guiders.hideAll}, {name: "继续", onclick: guiders.next}], description: "这里是网站的LOGO,点击此LOGO,可以链接到网站首页。", offset: {left:20, top:-30}, id: "second", next: "third", position: 7, title: "功能介绍演示三", xButton: true }); guiders.createGuider({ attachTo: ".top_title", buttons: [{name: "继续", onclick: guiders.next}], description: "这里是文章标题,点击此标题可以链接到相关文章的详细介绍。", id: "third", next: "fourth", position: 7, title: "功能介绍演示二", width: 450 }); guiders.createGuider({ attachTo: "#demo", buttons: [{name: "关闭", onclick: guiders.hideAll}, {name: "继续", onclick: guiders.next}], buttonCustomHTML: "<input type=\"checkbox\" id=\"stop_showing\" /><label for=\"stop_showing\" class=\"stopper\">不再显示此信息</label>", description: "你可以定制CSS,展示不同的风格样式。", id: "fourth", next: "fifth", position: 7, title: "功能介绍演示三", width: 500 }); guiders.createGuider({ attachTo: "#demo", buttons: [{name: "继续", onclick: guiders.next}], description: "你可以自定义显示内容,还支持html哦, <br/><br/> <img src=\"qqmail.jpg\" style=\"border: 1px solid #333;\" /><br/>", id: "fifth", next: "finally", position: 6, offset: {left:0, top:-80}, title: "功能介绍演示四", width: 550 }); guiders.createGuider({ buttons: [{name: "关闭", onclick: guiders.hideAll}], description: "好了,介绍完毕,如果你喜欢这款应用,请关注作者Jeff Pickhardt <a href='https://github.com/jeff-optimizely/Guiders-JS'>github.com/jeff-optimizely/Guiders-JS</a><br/>同时也感谢您对<a href='http://www.helloweba.com'>www.helloweba.com</a>的关注。", id: "finally", overlay: true, title: "OK,介绍完毕", width: 500 }); </script> </body> </html>