新手引导 intro.js

introJs().setOptions({
  prevLabel:"", //上一步骤按钮的文字
  nextLabel:"", //下一步骤按钮的文字
  skipLabel:'<span class="close"></span>', //退出按钮的文字（可以用html标签）
  doneLabel:'<span class="close"></span>',// 完成按钮的文字,不会和skip同时出现
  showBullets:false, // 是否显示小圆点
  showStepNumbers:false, // 是否显示数字,
  exitOnOverlayClick:false,// 点击蒙层是否退出
  hidePrev:true,//没有上一个步骤是否隐藏上一步按钮
  hideNext:true,//没有下一个步骤是否隐藏下一步按钮
  keyBoardNavigation:false, // 是否可以支持键盘快捷键上下步骤
}).addSteps([
{
  element:document.getElementById(""), // 高亮的元素
  intro:"<div><h1>22</h1><ul><li>2222</li></ul></div>",//提示的内容
  position:"bottom-middle-aligned"，// 提示内容的位置
  tooltipClass:"", // 提示的内容的类名
  highlightClass:"", // 高亮的内容的类名
  disableInteraction:true,// 是否禁止交互，如链接不能点击，输入框无法填写
  scrollPadding：20px, // 滚动到元素的距离（会自动滚动到元素，可是有时候你希望他再往下滚动一下）
  
}
]).start().onChange(function(){


}).onexit(function(){

})

intro.js,很强大，因为我这个新手引导定制的地方比较多，它支持我插入div等标签，修改样式等，还可以根据需要用js插入各种元素和事件，我很满意

有的时候获取元素时候，获取不到，所以需要一个等待元素出现的方法

define([],function(){
 'use strict';
  var util={
    // 等待元素出现 参数{id:"",class:""}
    waitDom:function(domSelect){
     return new Promise((resolve,reject)=>{
       var dom;
       var timer=setInterval(function(){
        if(!(domSelect instanceof Object)){
          reject("参数格式不正确")
        } 
        for(let k in domSelect){
           switch(k){
           case 'id':
            dom=document.getElementById(domSelect[k]);
            break;
           case 'class':
            dom=document.getElementsByClassName(domSelect[k])[0];
            break;
          } 
         }
        if(dom){
          resolve(true,timer)
         }
       },300)

     }).then(function(a,timer){
       if(a){
        clearInterval(timer)
      }
     }).catch(function(e){
       console.log(e)
     })
    }
  }；
 retruen util
})

util.waitDom({class:""}).then(function(){})

猜你喜欢