More than 5 years have passed since last update.

Hopscotchのメモ

Last updated at 2013-07-01Posted at 2013-07-01

HopscotchはWEBページの各要素に吹き出しを出してサイトの使い方を説明するためのもの
↓のサイトでデモを見るのが一番わかりやすい

Hopscotch

Hopscotchダウンロード

ダウンロードしてcssとjsをそれっぽいとこに配置

ViewのHTMLのheadタグ内

View

<head>
<link rel="stylesheet" href="css/hopscotch.css"></link>
</head>

bodyタグを閉じる直前

View

<script src="js/hopscotch-0.1.js"></script>
<script src="js/my_first_tour.js"></script>
</body>

ツアーの行程はmy_first_tour.jsに記述する

my_first_tour.js

// Define the tour!
    var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "これはタイトルですよ",
          content: "これはタイトルです",
          target: document.querySelector(".page-header h2"),
          placement: "bottom"
        },
        {
          title: "絞り込み",
          content: "このボタンで絞り込みます",
          target: document.querySelector("#filter"),
          placement: "right"
        }
      ]
    };

    // Start the tour!
    hopscotch.startTour(tour);

ツアー完成！！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up