新手引导插件intro.js的使用示例

来源：互联网发布：asp.net连接sql数据库编辑：程序博客网时间：2024/06/07 09:15
请在这里查看示例 ☞ intro示例
<!doctype html>  <html>   <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">    <meta name="renderer" content="webkit">    <title>demo</title>    <link rel="stylesheet" href="css/introjs.min.css">      <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>    <script type="text/javascript" src="js/intro.min.js"></script>      <style>      * {margin: 0; padding: 0;}      .f {margin: 30px 50px; background: red;}      .b {display: inline-block;}    </style>   </head>   <body>      <div class="a f" data-step="1" data-intro='介绍1'>这是第1个引导</div>      <div class="b f" data-step="3" data-intro='<img src="../images/a1.png">'>这是第3个引导</div>      <div class="c f" data-step="2" data-intro='<div style="border: 1px solid blue"><p style="border: 1px solid yellow">使用html元素丰富介绍内容使用html元素丰富介绍内容使用html元素丰富介绍内容</p></div>'>这是第2个引导</div>   </body>    <script>      ;$(function() {          //官方网址: http://www.jq22.com/jquery-info1320                             //github: https://github.com/usablica/intro.js/blob/master/README.md          introJs().setOptions({              'prevLabel': '← 上一步',              'nextLabel': '下一步 →',              'skipLabel': '跳过',              'doneLabel': '完成',            'showBullets': false,//隐藏直接跳转按钮(避免onchangebug)          }).start().onexit(function() {//非常规退出              console.log(2);          }).oncomplete(function() {//正常完成              console.log(1);          }).onchange(function(obj) {//已完成当前一步              var curNum = parseInt($(obj).attr('data-step').match(/\d+/)[0]);//当前的下标              $('.tipStep'+ (curNum-1)).hide();//隐藏前一个              $('.tipStep'+ (curNum+1)).hide();//隐藏后一个              $(obj).show();//显示当前          });                    });   </script>  </html>
0 0