构建一个用于产品介绍的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>
构建一个用于产品介绍的WEB应用的更多相关文章
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 ...
- 如何构建一个多人(.io) Web 游戏，第 2 部分
原文:How to Build a Multiplayer (.io) Web Game, Part 2 探索 .io 游戏背后的后端服务器. 上篇:如何构建一个多人(.io) Web 游戏,第 1 ...
- 从零构建一个简单的 Python Web框架
为什么你想要自己构建一个 web 框架呢?我想,原因有以下几点: 你有一个新奇的想法,觉得将会取代其他的框架 你想要获得一些名气 你遇到的问题很独特,以至于现有的框架不太合适 你对 web 框架是如何 ...
- 如何构建一个多人(.io) Web 游戏，第 1 部分
原文:How to Build a Multiplayer (.io) Web Game, Part 1 GitHub: https://github.com/vzhou842/example-.io ...
- 使用SignalR构建一个最基本的web聊天室
What is SignalR ASP.NET SignalR is a new library for ASP.NET developers that simplifies the process ...
- 构建一个最简单的web应用并部署及启动
第一种构建方式:不使用maven File-new-Dynamic Web Project,用这种方式构建的web项目是在web.xml文件中配置了welcome-file的,但是却没有对应的文件,所 ...
- 使用Gradle构建构建一个Java Web工程及持续集成环境Jenkins配置
安装Eclipse插件——Buildship 什么是Buildship? Buildship能方便我们通过Eclipse IDE创建和导入Gradle工程,同时还能执行Gradle任务. Eclips ...
- [译]Spring Boot 构建一个RESTful Web服务
翻译地址:https://spring.io/guides/gs/rest-service/ 构建一个RESTful Web服务 本指南将指导您完成使用spring创建一个“hello world”R ...
- 从实体框架核心开始:构建一个ASP。NET Core应用程序与Web API和代码优先开发
下载StudentApplication.Web.zip - 599.5 KB 下载StudentApplication.API.zip - 11.5 KB 介绍 在上一篇文章中,我们了解了实体框架的 ...
随机推荐
- cf455A Boredom
A. Boredom time limit per test 1 second memory limit per test 256 megabytes input standard input out ...
- 杭电oj 1328
Tips:本题中没有任何难度,直接按普通逻辑进行计算即可. #include<stdio.h> #include<string.h> ]={'A','B','C','D','E ...
- 逆向x64-small-trick
在逆向一些x64的代码时,会发现有一小段汇编代码理解不了,这个时候回想,要是能单独执行这一小段汇编就好了.现在我就介绍一个我的解决方法:很小汇编一段代码,但是不好理解,我就把它单独写成了一个函 ...
- Meta标签中的apple-mobile-web-app-capable属性及含义
这meta的作用就是删除默认的苹果工具栏和菜单栏. content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示.
- 回滚Swtichover
从11.2.0.2开始,如果由于某种原因switchover没有成功,可以回滚switchover. For physical standby databases in situations wher ...
- Swift和Objective-C的差异性
1:Type Swift提供了类型推断,不需要人工的去注释变量的类型信息,编译器会通过变量的值来推断类型.例如,编译器可以自动将该变量设置为字符串: // 自动推断,不显示 var name1 = & ...
- Spring-----代码中使用注入的Properties配置属性
转载自:http://blog.csdn.net/hekewangzi/article/details/49990799
- python函数与方法装饰器
之前用python简单写了一下斐波那契数列的递归实现(如下),发现运行速度很慢. def fib_direct(n): assert n > 0, 'invalid n' if n < 3 ...
- View的工作原理
一.认识ViewRoot和DecorView 当Activity对象被创建的时候,会将DecorView添加到Window中,同时创建ViewRootImpl对象(ViewRoot对应于ViewRoo ...
- jquery的选项卡事件
<?php /* * * @Authors peng--jun * @Email 1098325951@qq.com * @Date 2015-11-28 09:26:54 * @Link ht ...