什么是跳房子?
跳房子是一个框架,使开发人员可以轻松预览产品并添加到他们的网页。跳房子接受JSON对象作为输入,并提供开发人员来控制渲染巡演显示和管理的游览进度的API。
要使用跳房子框架上手,只需包括hopscotch.css和hopscotch.js您的网页上。这将加载跳房子对象到全局的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);
这一切就是这么简单!