1.demo直接贴上来了，有什么不懂的，直接去官网上看,地址：https://introjs.com/。

2.这个intro插件的版本是v2.7.0，复制下来代码，引入库应该直接可以运行。

3.点评一下：
　　a.插件不会自己记录引导的信息，需要手动控制引导是不是执行过
　　b.不在step里提供钩子，而是提供全局的钩子
　　c.在全局钩子里用this._introItems[this._currentStep]找到当前的
　　d.可以在step里定义自己的函数，然后在全局钩子里调用
　　e.不能动态生成节点
　　f.backdrop的时候，点下一步不会闪
　　g.提供hints的支持
　　h.element为id的时候没啥说的，为class的时候，第一个匹配上的class出现引导

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="introjs.css" type="text/css" rel="stylesheet" />

<script src="jquery-2.1.4.js"></script>

<script type="text/javascript"  src="intro.js"></script>

<script type="text/javascript">

    $(function(){

        intro = introJs();

        intro.setOptions({

            prevLabel:"<",

            nextLabel:">",

            skipLabel:"skip",

            doneLabel:"done",

            steps: [

                {

                    element: '#div1',

                    intro: '1~~',

                    position: 'right'

                },

                {

                    element: '#div2',

                    intro: '2~~',

                    position: 'right'

                },

                {

                    element: '.div3',

                    intro: '<a href="www.cnblogs.com">3</a>~~',

                    position: 'bottom'

                }

            ],

            hints: [

                {

                    element: '#div1',

                    hint: "This is a tooltip.",

                    hintPosition: 'top-middle'

                },

                {

                    element: '#div2',

                    hint: 'More features, more fun.',

                    position: 'left'

                },

                {

                    element: '.div3',

                    hint: "<b>Another</b> step.",

                    hintPosition: 'top-middle'

                }

            ]

        });

        intro.onbeforechange(function(targetElement) {

           console.log(this)  // this._introItems[this._currentStep]

        });

        intro.start();

    });

</script>

</head>

<body>

    <div id="div1" style="width:150px;height:50px;">1</div>

    <div id="div2" style="width:150px;height:50px;">2</div>

    <div class="div3" style="width:150px;height:50px;">3</div>

    <button onclick="intro.addHints()">addHint</button>

</body>

</html>

Js用户引导插件intro的更多相关文章

  1. Js用户引导插件bootstrap-tour

    1.demo直接贴上来了,有什么不懂的,直接去官网上看,地址:http://bootstraptour.com/. 2.这个bootstrap-tour插件的版本是v0.12.0,复制下来代码,引入库 ...

  2. BlueDream.js(蓝梦)——jQuery网站使用引导插件

    小菜在前端世界游荡有些时间了,常见的插件多少有些了解,但却很少看到用户引导插件. 所谓用户引导插件,就是在第一次使用某个网站时,会弹出一些小动画,告诉你网站的基本使用方法,帮你快速入门. 这应该是个常 ...

  3. vue 用driver 添加用户引导

    npm 安装: npm install driver.js //用户引导 import Driver from 'driver.js' import 'driver.js/dist/driver.mi ...

  4. 网站功能操作分布引导插件：Intro.js介绍；React里如何使用Intro.js以及如何进行分页导航

    插件作用:使用向导,引导新用户正确使用Web网站.我的环境是React+Mobx. 基本使用介绍,参加代码地址里的README.md:https://github.com/usablica/intro ...

  5. 自定义Angular插件 - 网站用户引导

    最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了“用户引导”功能,对于初次进入系统的用户一些简单的使用培训training.对于大多数网站来说,这是一个很常见的功能.所 ...

  6. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  7. 前端分布引导插件IntroJs的使用

    在用户第一次使用网站的时候,一般会提供新手引导的提示,提示用户重要的功能使用,实现方法比较多,但是有一点,屏幕的自适应问题,大多数自己写的实现方法无非就是一个div遮罩层,然后再需要指引的位置放置一张 ...

  8. 给Chrome和Firefox添加js脚本作为插件的方法

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/5973141. ...

  9. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

随机推荐

  1. node.js 学习03

    node.js学习03 解决浏览器接收服务端信息之后乱码的问题: 服务器通过设置http响应报文头,告诉浏览器使用相应的编码 来解析网页. res.setHeader('Content','text/ ...

  2. 【设计模式 7】从公司的目前框架和API Gateway，谈谈对外观模式的理解

    我,第一次用到外观模式,应该是3年多以前.那时候是做一个收费系统,在当时的U层和B层之间,加了一层Facade.当时,在一些复杂的业务逻辑处理时,感受到了加入外观层的好处,但对于一些简单的(我指的是, ...

  3. Redis源码之String操作

    0.前言 String操作是Redis操作中最基本的类型,包含get,set,mget,mset,append等等.下面我们会具体分析下一些命令的详细流程,特么简单的命令没有列出. 1.SET命令 2 ...

  4. atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerException  v2 q31

    atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerExceptionv2 q31 1. #--现象 java.lang. ...

  5. java包命名规则

    package indi/onem.发起者名.项目名.模块名... package pers.个人名.项目名.模块名... package priv.个人名.项目名.模块名... package te ...

  6. Java 十进制和十六制之间的转化（负数的处理）

    原文: http://www.cnblogs.com/literoad/archive/2013/01/25/2875908.html 在一些情况下,我们需要将数字在十进制和十六制下互相转化. 在Ja ...

  7. Unity3d中使用自带动画系统制作下雨效果(二)

    接着昨天的(一),今天上下雨效果的后半部分.在最后附上网盘链接,有使用的素材及本次的工程源文件,想看看的童鞋可以下载~~ 下雨效果分两部分:地上的涟漪和空中的雨滴.那么现在就开始,是使用unity3d ...

  8. Ubuntu17 root ssh

    Ubuntu provides OpenSSH (OpenBSD Secure Shell) in its universe repositories, which is a suite of sec ...

  9. Mybatis学习手记（二）

    要点一.如果字段名与类的属性名不一致,要在*Mapper.xml文件中,新建resultMap 配置对应关系,如下图:

  10. JS常用的方法总结

    /** * 将参数格式化为对象 * @param urlParams type string * @example * let urlParams = 'name="xiaoliu" ...