introJs用法及在webkit内核浏览器的一个报错
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; }; }