新手引导 intro.js(转)

本文链接：https://blog.csdn.net/lzq_20150715/article/details/89435203

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

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

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

 1 define([],function(){
 2  'use strict';
 3   var util={
 4     // 等待元素出现 参数{id:"",class:""}
 5     waitDom:function(domSelect){
 6      return new Promise((resolve,reject)=>{
 7        var dom;
 8        var timer=setInterval(function(){
 9         if(!(domSelect instanceof Object)){
10           reject("参数格式不正确")
11         } 
12         for(let k in domSelect){
13            switch(k){
14            case 'id':
15             dom=document.getElementById(domSelect[k]);
16             break;
17            case 'class':
18             dom=document.getElementsByClassName(domSelect[k])[0];
19             break;
20           } 
21          }
22         if(dom){
23           resolve(true,timer)
24          }
25        },300)
26  
27      }).then(function(a,timer){
28        if(a){
29         clearInterval(timer)
30       }
31      }).catch(function(e){
32        console.log(e)
33      })
34     }
35   }；
36  retruen util
37 })
1 util.waitDom({class:""}).then(function(){})

 

posted @ 2019-11-26 11:40  微光半夏星  阅读(698)  评论(0)  编辑  收藏  举报