IT的隱形人世界

最近覺得網站比較複雜，所以問了谷哥大神看看有沒有甚麼方式可以讓使用者更簡單的了解網站的使用方式

就找到了introjs這個簡單的前端套件

首先使用CDN引入

<link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js"></script>

 

再來設定要被導覽的位置Html

例如這樣，我在需要被導覽的div上加上了ID，以利後續使用

<div id="DemoStep1">
        <h1>{{ChineseName}}</h1>
        <h3>{{EnglishName}}</h3>
</div>

<div id="DemoStep2">
        - C# ( 5 years exp.) <br>
        - Delphi ( 2 years exp.) <br>
        - Vue / Js / Html  ( 5 years exp.)<br>
        - PLSQL ( 7 years exp.)<br>
        - Java ( 2 years exp.)<br>
</div>

 

再來是js部分:

只要在setOptions中的steps放入參數element即可

onDemoClick : function (){
               introJs()
                  .setOptions({
                  steps: [{
                     title: '歡迎來到謝政剛的履歷',
                     intro: '我這邊將快速為您介紹 👋'
                  },
                  {
                     element: document.querySelector('#DemoStep1'),
                     intro: '這是我的名字'
                  },
                  {
                     element: document.querySelector('#DemoStep2'),
                     intro: '這是我的技能年資'
                  }
                  .setOption("skipLabel", "跳過導覽")
                  .setOption("doneLabel", "完成")
                  .start();

}

 

 

 

大概會呈現這樣，第一步驟因為沒有元素，所以會直接呈現

後面因為有指定元素，所以會把該div整個圈起來，並敘述說明

 

很簡單吧!

 

可以參考原作者 : https://introjs.com/