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. C++ 内存泄漏

    1. 内存泄漏: 在计算机科学中,内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况. 内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前 ...

  2. js和jquery触发按钮点击事件

    js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...

  3. git设置及常用命令

    下载 下载地址:https://git-scm.com/downloads windows系统安装 默认安装即可. 其它系统安装方式请自行百度,网上教程很多. 设置 windows桌面右键,选择Git ...

  4. iOS valueForKeyPath快速计算求和、平均值、最大、最小

    iOS中开始取出数组中最大值,最小值除了使用排序的方式,还可以使用valueForKeyPath的方式直接取出 array = @[@(10),@(100),@(20),@(97)]; CGFloat ...

  5. makefile变量定义应用到c语言

    makefile是为组织程序工程的,其定义的宏怎样应用到c程序中呢? 我们知道Makefile中可定义变量或导出变量,make命令可定义变量:编译器(如gcc)可通过CFLAGS定义宏. 但如何才能使 ...

  6. finsh初步

    一. finsh在RT-Thread中被设计成一个独立的线程,它试图从外部设备中获得用户的输入,然后对用户命令进行解析执行. 正确使用finsh需要一个关联过程: rt_hw_board_init() ...

  7. Razor 3、MVC 5

    Razor 3 需要vs 2012 update 4 才可以 需要装一个 Microsoft ASP.NET and Web Tools 2013.1 才会有 MVC 5

  8. Alluxio部署（local模式）

    下载(pre-build for Hadoop 2.7) http://www.alluxio.org/download` 解压 tar -xvf alluxio-1.3.0-hadoop2.7-bi ...

  9. Spring 核心组件工作原理简析

    Spring Framework 的核心组件有三个: Spring Core,Spring Context 和 Spring Beans,它们奠定了 Spring 的基础并撑起了 Spring 的框架 ...

  10. 我的第二个java程序 循环

    public class Test {//类 public Test (int num){//构造方法,和类同名,无返回值,接收传参并定义传参的类型,大小写敏感 int x = 10;//局部变量,定 ...