Intro.js 分步向导插件使用方法

ByteRiderMaster
• 阅读 148

简介 为您的网站和项目提供一步一步的、更好的介绍 Intro.js 目前兼容 Firefox、Chrome 和 IE8,不兼容 IE6 和 IE7,后续版本将会提供更好的兼容。
在线演示及下载 在线演示
下载页面
使用方法 引入文件

 
<link rel="stylesheet" href="css/introjs.css">
<script src="js/intro.js"></script>

如果需要兼容 IE,还必须添加 introjs ie.css:

 
<!--[if lte IE 8]>
<link href="css/introjs-ie.css" rel="stylesheet">
<!-- <![endif]-->

HTML 在 HTML 代码中加入步骤和介绍,如:

 
<div><input class="btn" type="button" value="开始"></div>
<div data-step="2" data-intro="第二步,你好!">你好,这是第二步。</div>
<div data-step="1" data-intro="第一步,欢迎!">欢迎,这是第一步。</div>
<div data-step="3" data-intro="第三步,很好!">很好,这是第三步。</div>

data-step 是步骤,data-intro 是介绍。
JavaScript

 
$(function(){
    var $btn = $('.btn');
    $btn.on('click', function(){
    introJs().setOptions({
        nextLabel: '下一步 &rarr;',
        prevLabel: '&larr; 上一步',
        skipLabel: '退出'
        }).start();
    });
});

注意:上面的代码用使用 jQuery,但 Intro.js 并不是 jQuery 插件,所以它不需要 jQuery 也能运行,如果你使用的是原生 JavaScript,请修改成相应的方法。
另外,nextLabel、prevLabel 和 skipLabel 这三个参数可以省略,但省略后显示的是英文,你可以根据自己页面的语言省略或加入。
转载于猿2048:⇒《Intro.js 分步向导插件使用方法》

点赞
收藏
评论区
推荐文章
Easter79 Easter79
4年前
tomcat8+websocket演示
tomcat8真正支持jsr356(包含对websocket的支持),tomcat7部分版本的websocket实现不兼容jsr356。需要注意websocket与浏览器的兼容问题,有些早期版本的浏览器支持旧版本的websocket协议,可能会与新版本的websocket不兼容。博主采用"chrome 版本33.0.1750.117m"测试。
雷厉风行 雷厉风行
2年前
必备Mac软件:iThoughtsX引领头脑风暴,永久版下载
iThoughtsXforMac是一款专业的思维导图软件,作为一款强大的工具,它能够帮助用户更好地理清思路,整理思考,方便您高效的完成工作。本篇文章介绍iThoughtsXforMac的主要功能及优点。立即下载:一、多平台兼容iThoughtsXforMa
可莉 可莉
4年前
10款强大的开源 Javascript 图表库
1、EChartsECharts由百度前端技术部开发的,是一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
Wesley13 Wesley13
4年前
JS实现网站提示用户升级IE浏览器
自2016年1月12日起,Microsoft不再为WindowsXP和InternetExplorer10及以下版本提供相应支持和更新。如果你继续使用这些,访客将可能受到病毒、间谍软件和其他恶意软件的攻击,无法确保个人信息的安全。作为站长就非常有必要一起抵制IE6、IE7、IE8等低版本IE浏览器!工具/原料Not
Stella981 Stella981
4年前
ECharts2.0
简介ECharts,缩写来自EnterpriseCharts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender(https://www.oschina.n
Stella981 Stella981
4年前
Jeecg
内容提要JeecgBoot项目简介源码下载升级日志Issues解决v1.1升级到v2.0不兼容系统截图1.JEECGBoot项目简介
Easter79 Easter79
4年前
Thymeleaf实用实例
1\.简介之前一直使用Freemarker,对Thymeleaf了解但是不熟悉,最近因为其他项目组他们要快速搭建后台,使用了一个三方的框架用到了Thymeleaf,所以进一步了解了一些。发现Thymeleaf更加像前端的模板语言,所以对静态页面有更好的兼容性,就是,如果是Freemarker模板文件,浏览器是解析不了的,会直接出错。而
Stella981 Stella981
4年前
DIV+CSS解决IE6,IE7,IE8,FF兼容问题
1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1\.<metahttpequivmetahttpequiv"xuacompatible"content"IE7"/2.2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!i
铁笛仙 铁笛仙
3年前
Selenium中控制Chorme浏览器会闪退
selenium控制浏览器会闪退,有可能是webdriver控制器的版本太低,和主机上的Chrome版本号不兼容了。
linbojue linbojue
1年前
java 实现onlyoffice在线编辑
Java实现OnlyOffice在线编辑简介OnlyOffice是一款优秀的在线文档编辑工具,支持文档、表格、演示等多种类型的文件编辑。本文将介绍如何使用Java实现OnlyOffice在线编辑功能,为用户提供更加便捷的文档编辑体验。实现步骤步骤一:搭建后
程序员小五 程序员小五
1年前
融云IM干货丨如何确保插件与UNI-app的兼容性?
确保插件与UNIapp的兼容性,可以采取以下几个步骤:1.使用官方插件市场:尽量在寻找插件,因为官方市场提供的插件会有UNIapp兼容性描述,而第三方市场如npm的插件可能没有兼容性描述,容易下载到无法跨平台的、仅适配web的插件。2.检查平台兼容性:在插