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

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84181455 简介为您的网站和项目提供一步一步的、更好的介绍Intro.js 目前兼容 Firefox、Chrome 和 IE8,不兼容 IE6 和 IE7,后续版本将会提供更好的兼容。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84181455

简介

为您的网站和项目提供一步一步的、更好的介绍 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 这三个参数可以省略,但省略后显示的是英文,你可以根据自己页面的语言省略或加入。

相关文章
|
8天前
|
JavaScript 前端开发
基于SVG的js圆形菜单插件
这是一款基于SVG的js圆形菜单插件。该js圆形菜单插件可以生成漂亮的圆形菜单效果,支持二级菜单,支持使用鼠标滚动切换菜单
36 16
|
4天前
|
JavaScript
时尚简洁的js轮播图特效插件
这是一款时尚简洁的js轮播图特效插件。该轮播图采用es6语法制作,底部带缩略图和描述信息。图片和描述信息在切换时同步滑动。
|
18天前
|
Web App开发 JavaScript iOS开发
JS弹出式QQ在线客服插件
JS弹出式QQ在线客服插件
24 6
|
22天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
31 5
|
19天前
|
Web App开发 JavaScript 前端开发
高性能的纯Js滚动条美化插件smooth-scrollbar
smooth-scrollbar是一款高性能的纯JavaScript滚动条美化插件。该滚动条为现代浏览器而制作,它具有高性能,自由配置,平滑滚动等特点,支持各种现代桌面浏览器和手机设备。
|
1月前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
43 5
|
1月前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
1月前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
32 0
|
2月前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
83 0
|
2月前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
38 0

热门文章

最新文章