[JS]ページのツアーガイドをjQuery無しで実装するスクリプト -Shepherd

サイト構築 -JavaScript

Post on:2014年5月19日

Shepherdのデモ

デモはIE9+を含む、モダンブラウザでご覧ください。

デモページ

ガイドのパネルには説明のほかに、次のステップに進む、戻る、終了の操作ができます。

ガイドのパネルはそのステップごとに、最適な位置に表示されます。

ガイドは途中で終わることもでき、最後まで終了すると通常の画面が表示されます。

Shepherdの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="shepherd-theme-arrows.css" />
</head>
<body>
  ...
  <script src="shepherd.min.js"></script>
</body>

Step 2: HTML

HTMLは普通に実装してOKです。
ガイドを表示する要素には、それが指定できるようclassを付与しておきます。

Step 3: JavaScript

ガイドを表示するタイミングや内容はスクリプトで記述します。
基本書式は下記のようになり、classesに表示する場所、scrollToで自動スクロールの有無を指定します。

tour = new Shepherd.Tour
  defaults:
    classes: 'shepherd-theme-arrows'
    scrollTo: true

ガイドのステップを加える時は、下記のように追加していきます。

tour.addStep 'example-step',
  text: 'This step is attached to the bottom of the <code>.example-css-selector</code> element.'
  attachTo: '.example-css-selector bottom'
  classes: 'example-step-extra-class'
  buttons: [
    text: 'Next'
    action: tour.next
  ]

tour.start()