jQuery插件实现的页面功能介绍引导页效果

新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力。

Helloweba.com之前也有相关文章介绍:《构建一个用于产品介绍的WEB应用》,相信对有需要的朋友有帮助。本文将介绍另一款基于jQuery的页面引导页插件:pagewalkthrough.js,来看如何使用它。

先点击这里可以看在线演示效果

HTML

首先记得加载所需的css文件和jQuery库文件,以及pagewalkthrough插件。

 
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="css/jquery.pagewalkthrough.css" /> 

<!-- jQuery -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- Page walkthrough plugin -->
<script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script> 
 

接着,我们在页面的最下部加入引导内容,就是每一步需要展示的内容,默认先隐藏内容,等会用jQuery调用。

 
<div id="walkthrough-content">
    <div id="walkthrough-1">
        <h3>欢迎来到Helloweba示例DEMO演示页</h3> 

        <p>页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。</p>
        <p>点击下一步了解更多...</p>
    </div> 

    <div id="walkthrough-2">
        这里是Helloweba网站LOGO,点击这里可以直通网站首页。
    </div> 

    <div id="walkthrough-3">
        点击这里可以直接看插件的使用教程。
    </div> 

    <div id="walkthrough-4">
        点击这里去下载源码,免费的哦。。
    </div> 

    <div id="walkthrough-5">
        这是页脚和版权信息。
    </div>
</div> 
 

引导内容支持html内容,你可以在里面加入链接、图片等信息。还有就是引导页所需的箭头图片已经打包好,直接用css调用,关于字体,你可以调用外部字体,如手写字体可能效果更好。

jQuery

你完全可以在页面底部加入如下代码来调用pagewalkthrough,关键选项steps是一个数组,定义每一步引导调用的内容,参数wrapper定义了当前引导对应的元素位置,参数popup定义弹出提示引导层,参数content定义关联的内容元素,参数type定义弹出方式,包括tooltip和modal以及nohighlight三种方式,参数position定义了弹出层位置,包括top,left, right or bottom。

 
$(function() {
    $(‘body‘).pagewalkthrough({
        name: ‘introduction‘,
        steps: [{
           popup: {
               content: ‘#walkthrough-1‘,
               type: ‘modal‘
           }
        }, {
            wrapper: ‘#logo‘,
            popup: {
                content: ‘#walkthrough-2‘,
                type: ‘tooltip‘,
                position: ‘bottom‘
            }
        }, {
            wrapper: ‘h2.top_title a‘,
            popup: {
                content: ‘#walkthrough-3‘,
                type: ‘tooltip‘,
                position: ‘bottom‘
            }
        }, {
            wrapper: ‘a[href="http://www.helloweba.com/down-286.html"]‘,
            popup: {
                content: ‘#walkthrough-4‘,
                type: ‘tooltip‘,
                position: ‘right‘
            }
        }, {
            wrapper: ‘#footer p‘,
            popup: {
                content: ‘#walkthrough-5‘,
                type: ‘tooltip‘,
                position: ‘top‘
            }
        }]
    }); 

    // Show the tour
    $(‘body‘).pagewalkthrough(‘show‘);
}); 
 

保存之后,运行就能看到你要的效果。pagewalkthrough.js插件官方提供了很多参数配置,包括设置弹出层宽度、滚动速度,是否自动滚动,锁定滚动,以及多种回调函数,定义上一步下一步按钮,以及方法调用等等,这些本文不再描述,有兴趣的朋友可以移步到项目官网了解更多:https://github.com/jwarby/jquery-pagewalkthrough

时间: 2024-10-13 16:51:58

jQuery插件实现的页面功能介绍引导页效果的相关文章

jQuery插件 dataTable Ajax分页功能实现

jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.需要可以到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库. 在网页开发过程中,我们可能会从后台读入数据建表.当数据过大时,可能导致建表时间过长,于是就需要实现Ajax分页功能,代码如下: HTML: <table id="example" class="display" wid

使用jquery插件kkpager为页面添加分页

首先下载kkpager插件:https://github.com/pgkk/kkpager 1.将下载下来的js和css拷贝到项目中,在需要分页的页面引入kkpager插件所需的js和css,如下: <script type="text/javascript" src="js/kkpager.js"></script> <script type="text/javascript" src="js/jquer

微信分享引导页效果

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <meta http-e

ImageSwitcher实现引导页效果

效果图: 布局代码: <?xml version="1.0" encoding="UTF-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent">

写jQuery插件

手把手教你怎么写jQuery插件 这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话,进入正题. jQuey是一个非常好用的javascript类库,提供了非常多的接口给程序员使用.但在某些具体方面,并没有完全提供解决方法,这就要求我们自己实现.jQuery官方也提供jQuery拓展的标准.编写jQuery插件时,应该注意一下几点原则: 1. 避免

推荐60个jQuery插件(转)

jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现Javascript自定义动态调整网页文字大小 jQuery插件Magnify放大镜实现javascript图片放大功能 jQuery插件tooltip提示条实现Javascript动态文字或图片提示效果 jQuery插件Step Carousel Viewer实现Javascript图片滑动旋转效果

25个可遇不可求的jQuery插件

摘要:随着jQuery插件在网站建设过程中的使用率不断的增加,所以有必要跟进时代步伐开发出一些新的插件/代码片段,以此来巩固并提高前端用户体验,将用户体验提升到一个新的高度. 随着jQuery插件在网站建设过程中的使用率不断的增加,所以有必要跟进时代步伐开发出一些新的插件/代码片段,以此来巩固并提高前端用户体验,将用户体验提升到一个新的高度. 接下来所推荐的这些插件中有滑块.地图.图片旋转块等等,可以说是最好的.完全免费的jQuery插件. 1. Flat jQuery Price Slider

手把手教你怎么写jQuery插件

[原创作品]手把手教你怎么写jQuery插件 这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的'攻城狮'们能和大家一起分享,一起成长.点击左边我头像下边的"加入qq群",一起分享,一起交流,当然,可以一起吹水.哈,不废话,进入正题. jQuey是一个非常好用的javascript类库,提供了非常多的接口给程序员使用.但在某些具体方面,并没有完全提供解决方法,这就要求我们自己实现.jQuery官方也提供jQuery拓展的标准.编写jQuery插件时,应该注意一下

jquery插件图片延时加载实例详解(转)

jquery插件图片延时加载实例详解 效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://keleyi.com/