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. web.py学习遇到的问题

    刚配置好了web.py运行所需要的环境,试着运行一个入门小实例,结果遇到了异常提示.不知道是什么原因导致的(是环境没配置好?还是……),暂时做个标记,记录一下. 运行的代码 import web ur ...

  2. MQTT压力测试之Tsung的使用

    简介 Tsung 是一个压力测试工具,可以测试包括HTTP, WebDAV, PostgreSQL, MySQL, LDAP, and XMPP/Jabber等服务器.针对 HTTP 测试,Tsung ...

  3. 转FTP协议详解

    转自:http://www.cnblogs.com/li0803/archive/2010/11/16/1878833.html FTP 是File Transfer Protocol(文件传输协议) ...

  4. unity, 内存profile，ImageEffects Temp和Unity GI SystemTex RGBM

    最近用unity的Profiler对公司项目进行内存profile,发现一些问题,记录一下. 用Memory Area的Detailed View,用法见:http://docs.unity3d.co ...

  5. FPGA研发之道（25）-管脚

    管脚是FPGA重要的资源之一,FPGA的管脚分别包括,电源管脚,普通I/O,配置管脚,时钟专用输入管脚GCLK等. 本文引用地址:http://www.eepw.com.cn/article/2664 ...

  6. Git实战（四）状态转换

    上次的Git实战(三)环境搭建博文.我们大致解说了一下git的环境安装,今天我们解说一下Git的状态转换. 学习版本号控制工具.对工具进行版本号控制之间的状态转换很重要.毕竟Git仅仅是一个工具.假设 ...

  7. spring boot 多层级mapper

    mapper目录结构:   mapper ----dev -------produce   在 application.properties 文件中配置 mybatis.mapper-location ...

  8. centos 7 下安装haproxy

    1 haproxy 下载 从如下目录下载haproxy:http://www.haproxy.org/download/1.7/src/haproxy-1.7.1.tar.gz 2 haproxy 安 ...

  9. finsh初步

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

  10. markdown编辑器的小建议

    markdown编辑器使用建议 yaung  by 2012.12.1-------- 这里主要说明一下我们在windows和linux下对md文件的编辑方法,为大家提供一点个人建议,如果有更好的选择 ...