1、用法

很简单的用法,引入js,引入css,再执行introJs().start();
就可以了(备注:introJs会自动去抓取含有data-intro的dom在introJs源码中_introForElement有一段var allIntroSteps = targetElm.querySelectorAll("*[data-intro]"))
所以只要在想要有引导的某个块元素加上data-intro=“这是一个引导文本”,理论上就可以实现,当然introJs有很多插槽可以供前端更好的去做一些事情,
传送门https://www.lagou.com/lgeduarticle/94133.html
this._options = {
/* 下一步按钮的显示名称 */
nextLabel: 'Next →',
/* 上一步按钮的显示名称 */
prevLabel: '← Back',
/* 跳过按钮的显示名称 */
skipLabel: 'Skip',
/* 结束按钮的显示名称 */
doneLabel: 'Done',
/* 引导说明框相对高亮说明区域的位置 */
tooltipPosition: 'bottom',
/* 引导说明文本框的样式 */
tooltipClass: '',
/* 说明高亮区域的样式 */
highlightClass: '',
/* 是否使用键盘Esc退出 */
exitOnEsc: true,
/* 是否允许点击空白处退出 */
exitOnOverlayClick: true,
/* 是否显示说明的数据步骤*/
showStepNumbers: true,
/* 是否允许键盘来操作 */
keyboardNavigation: true,
/* 是否按键来操作 */
showButtons: true,
/* 是否使用点点点显示进度 */
showBullets: true,
/* 是否显示进度条 */
showProgress: false,
/* 是否滑动到高亮的区域 */
scrollToElement: true,
/* 遮罩层的透明度 */
overlayOpacity: 0.8,
/* 当位置选择自动的时候,位置排列的优先级 */
positionPrecedence: ["bottom", "top", "right", "left"],
/* 是否禁止与元素的相互关联 */
disableInteraction: false,
/* 默认提示位置 */
hintPosition: 'top-middle',
/* 默认提示内容 */
hintButtonLabel: 'Got it'
};

  

2、报错TypeError: 'undefined' is not a function (near '...}.bind(this));...')

bind()方法不存在,添加bind方法

// 该webkit浏览器不支持bind方法,添加bind方法
if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== "function") {
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}

  

  

introJs用法及在webkit内核浏览器的一个报错的更多相关文章

  1. 八大Webkit内核浏览器

    列举出时下最流行的Webkit内核浏览器,所以我们并不会做出评测和对比.PS:本文列举的浏览器有一部分为IE+Webkit双核浏览器,如果您对其他IE内核浏览器很感兴趣<抛弃数据!用体验和感觉告 ...

  2. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  3. 浅谈关于QT中Webkit内核浏览器

    关于QT中Webkit内核浏览器是本文要介绍的内容,主要是来学习QT中webkit中浏览器的使用.提起WebKit,大家自然而然地想到浏览器.作为浏览器内部的主要构件,WebKit的主要工作是渲染.给 ...

  4. C# webkit 内核浏览器 访问https 网站 提示 Problem with the SSL CA cert (path? access rights?)

    C# webkit 内核浏览器 访问https 网站 提示 Problem with the SSL CA cert (path? access rights?) 解决方法: 陈凯文11112014- ...

  5. IE浏览器连接WebSocket报错:java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

    在项目开发中整合了WebSocket,本来没什么问题了,但是偶尔发现用IE浏览器打开web端不能推送消息,因为PC端与服务器建立连接失败了.网上查了很多资料, 又看了看源码,都不对症:又怀疑是Spri ...

  6. 关于浏览器访问iLO报错ERR_SSL_BAD_RECORD_MAC_ALERT

    公司有几台HP DL380 G7服务器,ilo版本是ilo3(Integrated Lights-Out 3),ilo口配置好后,无法正常打开ilo页面 ping ilo口是通的,并且telnet 8 ...

  7. 拥有webkit内核浏览器的平台

    1-拥有webkit内核的浏览器: IOS safari Android 的浏览器 Google chrome 猎豹浏览器 百度浏览器 Opera 以上可知手机的浏览器均为webkit内核 2-拥有其 ...

  8. 当html中存在url中如: onclick="toView('参数1')", 参数1是特别字符,如&asop;&quot;' "等时,浏览器解析时会报错。解决方法如文中描述

    解决方案: 自定义标签将字符串转换成unicode编码后输出显示到页面即可 解析原理:解析顺序html  ---url ----javascript---url,由于unicode编码在htm解析阶段 ...

  9. python3+selenium使用浏览器IE的时候,无法打开IE浏览器,老是报错: Unexpected error launching Internet Explorer. Protected Mode settings are not the same for all zones

    python3+selenium使用浏览器IE的时候,老是报错: Unexpected error launching Internet Explorer. Protected Mode settin ...

随机推荐

  1. PyQt Designer中带参数的信号为什么匹配不到带参数的槽函数?

    老猿在学习ListView组件时,想实现一个在ListView组件中选中一个选择项后触发消息给主窗口,通过主窗口显示当前选中的项的内容. 进入QtDesigner后,设计一个图形界面,其中窗口界面使用 ...

  2. 第四章 、PyQt中的信号(signal)和槽(slot)机制以及Designer中的使用

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.引言 前面章节其实已经在使用信号和槽了,但是作为Qt中最重要的机制也是Qt区别与其他开发平台的重 ...

  3. Python基础知识学习随笔

    Python学习随笔:PyCharm的错误检测使用及调整配置减少错误数量 Python学习随笔:获取当前主机名和用户名的方法 博客地址:https://blog.csdn.net/LaoYuanPyt ...

  4. [GYCTF2020]Blacklist

    这题是用堆叠注入,同时也是借这题记录一下CTF中堆叠注入的一些骚操作 以下部分内容转载大佬的文章 show databases; 获取数据库名 show tables; 获取表名 show colum ...

  5. Project Lombok——带给你简洁、清晰的代码

    相信但凡有一点Java编程经历的人,都见过或者写过下面这种代码.这是一个简单的POJO,只有4个fields,加上构造器.equals.hash.toString以及各种getter setter,前 ...

  6. 小齐读者拿到快手、百度、网易等 offer 的独门秘籍!

    小齐说: 这篇文章来自读者冰红茶,他刚结束了秋招,拿了很多家 offer. 和他聊完之后,我觉得他的备考思路也完全适用于美国的面试,只是分值要调整一下,但是具体每一块的内容,地球村通用.所以分享给大家 ...

  7. 剑指offer二刷——数组专题——数字在升序数组中出现的次数

    题目描述 统计一个数字在升序数组中出现的次数. 我的想法 完整的解法我只想到了遍历数组然后依次统计,但这是不聪明的解法,而且没有利用上"升序数组"的这个条件. 题目标签有提醒可以用 ...

  8. 深度剖析目标检测算法YOLOV4

    深度剖析目标检测算法YOLOV4 目录 简述 yolo 的发展历程 介绍 yolov3 算法原理 介绍 yolov4 算法原理(相比于 yolov3,有哪些改进点) YOLOV4 源代码日志解读 yo ...

  9. 最简单的 K8S 部署文件编写姿势,没有之一!

    1. 头疼编写K8S部署文件? K8S yaml 参数很多,需要边写边查? 保留回滚版本数怎么设? 如何探测启动成功,如何探活? 如何分配和限制资源? 如何设置时区?否则打印日志是GMT标准时间 如何 ...

  10. JVM的艺术—JAVA内存模型

    *喜欢文章,动动手指点个赞 * 引言 亲爱读者你们好,关于jvm篇章的连载,前面三章讲了类加载器,本篇文章将进入jvm领域的另一个知识点,java内存模型.彻底的了解java内存模型,是有必要的.只要 ...