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学习随笔:Model/View中视图数据项编辑变动实时获取变动数据的方法

    对于Model/View中视图的数据编辑后怎么能实时获取编辑的数据变动位置和变动情况查阅了一些资料,终于基本弄明白必须重写Model的setData方法才能截获.setData方法是视图中各种角色数据 ...

  2. bugku login4

    (前排提示:这次思路写的极不清晰,可能只有我自己看的懂,打个预防针QAQ) 首先看题: 扫描,拿到了 .index.php.swp 这个文件是可以复原的. 上面的是重要的源码.审计之后发现这是CBC加 ...

  3. Leetcode学习笔记(1)

    scrapy爬虫的学习告一段落,又因为现在在学习数据结构,做题平台是lettcode:https://leetcode-cn.com/ 每周都要交一次做题的笔记,所以把相关代码和思路同时放在博客上记录 ...

  4. 第 3篇 Scrum 冲刺博客

    一.站立式会议 1.站立式会议照片 2.昨天已完成的工作 登录窗口的构建 3.今天计划完成的工作 ①帮助不会的同学连接数据库 ②登录识别模块 4.工作中遇到的困难 ①出现一些同学使用了不同种类的数据库 ...

  5. C#获取引用组件的版本信息

    /// <summary>        /// 当前目录下文件版本        /// </summary>        public void FilesVersion ...

  6. 一篇文章掌握Nginx核心文件结构

    1 Nginx核心配置结构 2 配置模块详解 设置worker进程的用户,指的linux中的用户,会涉及到nginx操作目录或文件的一些权限,默认为nobody user root; worker进程 ...

  7. 前端删除多条数据,如何将多个被删除项指定key传给后台

    实际情景: 前端需要移除多个用户,这时需要根据每个用户id进行批量删除操作 前端操作: 1. 拿到所有被操作用户的信息存入数组, 例如 userlist = [user1, user2, user3] ...

  8. STL——容器(Set & multiset)之 仿函数(函数对象)functor 的用法

    Set/multiset 中元素的存储数据总是会按照从大到小或者从小到大排列,这个是怎么实现的?这就要说 "仿函数" 这个概念了. 仿函数概念 1. 尽管函数指针被广泛用于实现函数 ...

  9. Day1 字符编码及编码函数

    ord() 函数 获取字符的整数表示chr() 函数 把整数编码转换为对应字符'\十六进制编码\十六进制编码' 可以将字符的整数编码使用十六进制的方式这样写Python字符串类型为str,在内存中以u ...

  10. ERROR 1071 (42000): Specified key was too long; max key length is 1000 bytes

    这个错误是我在安装ambari平台时,准备为ambari指定mysql数据库时,执行建表语句时遇到的. ERROR 1071 (42000): Specified key was too long; ...