Intro.js 分步向导插件使用方法
简介
为您的网站和项目提供一步一步的、更好的介绍
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: '下一步 →',
prevLabel: '← 上一步',
skipLabel: '退出'
}).start();
});
});
注意:上面的代码用使用 jQuery,但 Intro.js 并不是 jQuery 插件,所以它不需要 jQuery 也能运行,如果你使用的是原生 JavaScript,请修改成相应的方法。
另外,nextLabel、prevLabel 和 skipLabel 这三个参数可以省略,但省略后显示的是英文,你可以根据自己页面的语言省略或加入。
Intro.js 分步向导插件使用方法的更多相关文章
- 给Chrome和Firefox添加js脚本作为插件的方法
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/5973141. ...
- 网站功能操作分布引导插件:Intro.js介绍;React里如何使用Intro.js以及如何进行分页导航
插件作用:使用向导,引导新用户正确使用Web网站.我的环境是React+Mobx. 基本使用介绍,参加代码地址里的README.md:https://github.com/usablica/intro ...
- 网站引导页插件intro.js 的用法
intro.js是一个用于制作网页引导效果的js插件,用法很简单,intro.js.v2.0.rar 1.在需要的页面添加引用 intro.js introjs.css 这两个文件已经足够,但是文件夹 ...
- vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用
vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...
- iScroll.js插件使用方法
iScroll.js 用法参考 (share) 分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍 ...
- Js用户引导插件intro
1.demo直接贴上来了,有什么不懂的,直接去官网上看,地址:https://introjs.com/. 2.这个intro插件的版本是v2.7.0,复制下来代码,引入库应该直接可以运行. 3.点评一 ...
- 11 个超棒的 jQuery 分步指引插件
当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面 ...
- 11个超棒的 jQuery 分步指引插件(转)
当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面 ...
- jQuery 分步引导 插件
转自:http://blog.libnav.com/js/57.html 很多时候一个网站或者一个Web应用出品,为了让你的用户知道你的站点(或应用)有些什么?如何操作?为了让你的用户有更好的体验.往 ...
随机推荐
- Latex 排版技巧 1——数学公式对齐
在我们排版数学推导式时,非常多时候我们希望可以让公式的等号对齐 这样更接近人的数学推导习惯 例如以下图效果图 使用 begin{aligned} end{aligned}将所需对齐的数学公式代码块包起 ...
- 逆波兰法求解数学表达示(C++)
主要是栈的应用,里面有两个函数deleteSpace(),stringToDouble()在我还有一篇博客其中:对string的一些扩展函数. 本程序仅仅是主要的功能实现,没有差错控制. #inclu ...
- 初探Java中的异常处理
Java中的异常有以下几种: 1) Error:Java运行时的内部错误. 2) Exception:程序中应该捕获的异常. RuntimeException:因为编程产生的错误 ...
- iOS 基础类解析 - NSString、NSMutableString
iOS 基础类解析 - NSString 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...
- 使用Carthage安装及使用第三方库
CocoaPods 安装不了,只好使用Carthage 参考:http://www.jianshu.com/p/52dff4cef8a2 http://www.jianshu.com/p/bf263c ...
- oc34--instancetype和id的区别
// Person.h #import <Foundation/Foundation.h> @interface Person : NSObject @property int age; ...
- 【NOI 2014】 动物园
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3670 [算法] KMP [代码] #include<bits/stdc++.h ...
- class--类②
定义 C++ 对象 类提供了对象的蓝图,所以基本上,对象是根据类来创建的.声明类的对象,就像声明基本类型的变量一样.下面的语句声明了类 Box 的两个对象: Box Box1; // 声明 Box1, ...
- bzoj 4521 [ Cqoi 2016 ] 手机号码 —— 数位DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4521 数位DP,记录好多维状态: 写了半天,复杂得写不下去了,于是参考一下TJ... 练习简 ...
- diff比较两个文件的差异
1.diff -ruN a.txt b.txt>patch.txt比较第二个文件与第一个文件相比的变化,并将变化添加到patch.txt文件中,-表示删除的行,+表示添加的行 2.下面的,“&l ...