hopscotch.js_使开发人员可以轻松预览产品并添加到他们的网页

hopscotch.js

网站地址:http://linkedin.github.io/hopscotch/

GitHub:https://github.com/linkedin/hopscotch

网站描述:使开发人员可以轻松预览产品并添加到他们的网页

访问官网

GitHub

hopscotch是一个框架，使开发人员可以轻松预览产品并添加到他们的网页。hopscotch接受JSON对象作为输入，并提供开发人员来控制渲染巡演显示和管理的游览进度的api。

使用步骤

要使用hopscotch框架上手，只需包括hopscotch.css和hopscotch.js您的网页上。这将加载hopscotch对象到全局的window对象。

<html>
      <head>
        <title>My First Hopscotch Tour</title>
        <link rel="stylesheet" href="css/hopscotch.css"></link>
      </head>
      <body>
        <h1 id="header">My First Hopscotch Tour</h1>
        <div id="content">
          <p>Content goes here...</p>
        </div>
        <script src="js/hopscotch.js"></script>
        <script src="js/my_first_tour.js"></script> <!-- define and start your tour in this file -->
      </body>
</html>

然后在你的my_first_tour.js文件中，定义并启动您的游览。

// Define the tour!
    var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "My Header",
          content: "This is the header of my page.",
          target: "header",
          placement: "right"
        },
        {
          title: "My content",
          content: "Here is where I put my content.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };
 
    // Start the tour!
    hopscotch.startTour(tour);

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/1664