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. javascript 字符串对象新增 replaceAll 方法

    String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) { if(! RegExp.prototype.is ...

  2. leetcode第一刷_Balanced Binary Tree

    二叉平衡树好火啊.差点儿每一个公司的笔试题里都有它.考了好多次我都不会,挂笔试非常有可能就是由于它.另一个它的同伙叫二叉搜索树,貌似人气比它还要高一些. 二叉平衡树是什么样的树呢.是每一个节点的左右子 ...

  3. Creating Context Menu / 创建上下文菜单项 / VC++, Windows, DLL, ATL, COM

    创建上下文菜单项 1.新建一个ATL Project. 2.建议将Project Property中Linker – General - “Register Output” 设为no,C/C++ - ...

  4. Redis提供商配置ASP.NET会话状态

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Co ...

  5. 680. Valid Palindrome II【easy】

    680. Valid Palindrome II[easy] Given a non-empty string s, you may delete at most one character. Jud ...

  6. Unity3D - LINEAR INTERPOLATION

    原文地址:http://unity3d.com/learn/tutorials/modules/beginner/scripting/linear-interpolation 水平有限,翻译粗略,欢迎 ...

  7. 配置linux服务器和pycharm的连接

    1.打开pyCharm Tools->Deployment->Configuratio Connecion ->Root Path: /home/admin/application/ ...

  8. spark 1.3 发布了

    悄悄地,spark 还是像往常一样,发布了1.3版本,从release notes可以看出,这一版本比较大的变化是1. 增加了DataFrame API,这样以后操作一些结构化的数据集时将会变的非常方 ...

  9. c/c++基本数据类型大小

    各个类型的变量长度由编译器来决定(实际上与操作系统位数和编译器都有关)使用时可用sizeof()得到,当前主流编译器一般是32位或64位. 类型 32位 64位 char 1 1 short int ...

  10. PHP实现自己活了多少岁

    1.mktime()函数的功能 2.代码: $birth = mktime(0,0,0,10,2,1992);//出生的时间戳 $time = time();//当前的时间戳 $age = floor ...