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;
        };
    }

  

 

  

posted @ 2020-12-08 09:34  iwen1992  阅读(188)  评论(0编辑  收藏  举报