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

<!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应用的更多相关文章

  1. Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 ...

  2. 如何构建一个多人(.io) Web 游戏，第 2 部分

    原文:How to Build a Multiplayer (.io) Web Game, Part 2 探索 .io 游戏背后的后端服务器. 上篇:如何构建一个多人(.io) Web 游戏,第 1 ...

  3. 从零构建一个简单的 Python Web框架

    为什么你想要自己构建一个 web 框架呢?我想,原因有以下几点: 你有一个新奇的想法,觉得将会取代其他的框架 你想要获得一些名气 你遇到的问题很独特,以至于现有的框架不太合适 你对 web 框架是如何 ...

  4. 如何构建一个多人(.io) Web 游戏，第 1 部分

    原文:How to Build a Multiplayer (.io) Web Game, Part 1 GitHub: https://github.com/vzhou842/example-.io ...

  5. 使用SignalR构建一个最基本的web聊天室

    What is SignalR ASP.NET SignalR is a new library for ASP.NET developers that simplifies the process ...

  6. 构建一个最简单的web应用并部署及启动

    第一种构建方式:不使用maven File-new-Dynamic Web Project,用这种方式构建的web项目是在web.xml文件中配置了welcome-file的,但是却没有对应的文件,所 ...

  7. 使用Gradle构建构建一个Java Web工程及持续集成环境Jenkins配置

    安装Eclipse插件——Buildship 什么是Buildship? Buildship能方便我们通过Eclipse IDE创建和导入Gradle工程,同时还能执行Gradle任务. Eclips ...

  8. [译]Spring Boot 构建一个RESTful Web服务

    翻译地址:https://spring.io/guides/gs/rest-service/ 构建一个RESTful Web服务 本指南将指导您完成使用spring创建一个“hello world”R ...

  9. 从实体框架核心开始:构建一个ASP。NET Core应用程序与Web API和代码优先开发

    下载StudentApplication.Web.zip - 599.5 KB 下载StudentApplication.API.zip - 11.5 KB 介绍 在上一篇文章中,我们了解了实体框架的 ...

随机推荐

  1. python编辑器对比和推荐

    python编辑器对比和推荐   我先给一个初步的表格吧,大家如果有什么意见,或有补充,欢迎提出.有些我没有用过,先不写了.以下是我使用过的python IDE: 除了PythonWin, Visua ...

  2. hdu 1166 敌兵布阵_线段树

    题意:略 思路:这题是单点更新,如果是减少的话,直接把数据变成负加上去就行了. #include <iostream> #include<cstdio> #include< ...

  3. poj 1887 Testing the CATCHER_最长上升子序列

    题意:题目太长没看,直接看输入输出猜出是最长下降子序列 用了以前的代码直接a了,做法类似贪心,把最小的顺序数存在数组里面,每次二分更新数组得出最长上升子序列 #include<iostream& ...

  4. PHP转码函数

    解决中文乱码问题,数据库使用sql server ,是gbk编码,所以在存储和前台显示时都要转码. function cn_convert2web($str){ return iconv('gbk', ...

  5. Linux下将多个静态库(.a)合并成一个静态库文件(.a)的命令操作，方法一

    .a 文件的结构和.tar文件就没有什么区别. x 命令解出来, a 命令添加, t命令列表 假设A.a, B.a C.a 在/usr/local/lib目录下 mkdir /tmp/libABC c ...

  6. C#中静态与非静态方法比较【转】

    C#静态方法与非静态方法的区别不仅仅是概念上的,那么他们有什么具体的区别呢?让我们通过本文向你做一下解析. C#的类中可以包含两种方法:C#静态方法与非静态方法.那么他们的定义有什么不同呢?他们在使用 ...

  7. uva 10635 - Prince and Princess(LCS）

    题目连接:10635 - Prince and Princess 题目大意:给出n, m, k,求两个长度分别为m + 1 和 k + 1且由1~n * n组成的序列的最长公共子序列长的. 解题思路: ...

  8. Swift String 一些常用方法

    //字符串 //1 判断字符串是否为空 var test1Str="" var test1Str2:String = String(); println("test1St ...

  9. jQuery.innerWidth() 函数详解

      innerWidth()函数用于设置或返回当前匹配元素的内宽度. 内宽度包括元素的内边距(padding),但不包括外边距(margin).边框(border)等部分的高度.如下图: 如果你要获取 ...

  10. UVA 1312 Cricket Field

    题意: 在w*h的坐标上给n个点, 然后求一个最大的矩形,使得这个矩形内(不包括边界)没有点,注意边界上是可以有点的. 分析: 把坐标离散化.通过两重循环求矩形的高,然后枚举,看是否能找到对应的矩形. ...