Js用戶引導插件intro
阿新 • • 發佈：2017-11-29
ons ansi position hint click utf done 地址 htm
1.demo直接貼上來了，有什麽不懂的，直接去官網上看,地址：https://introjs.com/。
2.這個intro插件的版本是v2.7.0，復制下來代碼，引入庫應該直接可以運行。
3.點評一下：
a.插件不會自己記錄引導的信息，需要手動控制引導是不是執行過
b.不在step裏提供鉤子，而是提供全局的鉤子
c.在全局鉤子裏用this._introItems[this._currentStep]找到當前的
d.可以在step裏定義自己的函數，然後在全局鉤子裏調用
e.不能動態生成節點
f.backdrop的時候，點下一步不會閃
g.提供hints的支持
h.element為id的時候沒啥說的，為class的時候，第一個匹配上的class出現引導
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="introjs.css" type="text/css" rel="stylesheet" /> <script src="jquery-2.1.4.js"></script> <script type="text/javascript" src="intro.js"></script> <script type="text/javascript"> $(function(){ intro = introJs(); intro.setOptions({ prevLabel:"<", nextLabel:">", skipLabel:"skip", doneLabel:"done", steps: [ { element: ‘#div1‘, intro:‘1~~‘, position: ‘right‘ }, { element: ‘#div2‘, intro: ‘2~~‘, position: ‘right‘ }, { element: ‘.div3‘, intro: ‘<a href="www.cnblogs.com">3</a>~~‘, position: ‘bottom‘ } ], hints: [ { element: ‘#div1‘, hint: "This is a tooltip.", hintPosition: ‘top-middle‘ }, { element: ‘#div2‘, hint: ‘More features, more fun.‘, position: ‘left‘ }, { element: ‘.div3‘, hint: "<b>Another</b> step.", hintPosition: ‘top-middle‘ } ] }); intro.onbeforechange(function(targetElement) { console.log(this) // this._introItems[this._currentStep] }); intro.start(); }); </script> </head> <body> <div id="div1" style="width:150px;height:50px;">1</div> <div id="div2" style="width:150px;height:50px;">2</div> <div class="div3" style="width:150px;height:50px;">3</div> <button onclick="intro.addHints()">addHint</button> </body> </html>
Js用戶引導插件intro