Webページのチュートリアルを作れるjQueryライブラリ「Chardin.js」の使い方

スポンサーリンク
Pocket
LINEで送る

Webサービスを作っていると機能の使い方説明が必要です。

ですが、「使い方」とか「マニュアル」とか「ヘルプ」ってのはほぼ読まれないんですよね。

そんなこともあり、最近のWebサービスだと登録してはじめてページを見たときに

ここのボタンは何の機能なのか説明するチュートリアルがあります。

 

今回はそのチュートリアルを実現できるjQueryライブラリ「Chardin,js」を使ってみます。

 

Chardin.js

概要

Chardin.jsはページ全体にラベルをつけて何の機能なのかを説明するライブラリです。

こんな感じでページの要素ずつに説明文がつくチュートリアルです。

使い方

まずは、本体をダウンロード

https://github.com/heelhook/chardin.js

上記のリンクでダウンロードできるファイルから

スポンサーリンク
chardinjs.css

chardinjs.min.js

の二つのファイルを読み込ませます。

 <link href="chardinjs.css" rel="stylesheet">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="chardinjs.min.js"></script>

とりあえず、これで準備OK

jQueryライブラリなので読込み順序に注意しましょう。

 

チュートリアルを表示する要素に属性を追加します。

data-intro: 説明文

data-position: “top”, “left”, “right”, “bottom”

 

<h1 data-intro="これはタイトル" data-position="bottom">title</h1>

こんな感じにすると「これはタイトル」が下に表示されます。

 

チュートリアルを実行

<script type="text/javascript">
 $(function(){
  $('body').chardinJs('start');
});
 </script>

これでページを読み込むとチュートリアルが表示されます。

 

toggleにするとチュートリアルをON/OFFできます。

ボタンのクリックイベントにしたりして使います。stopは停止です。

$('body').chardinJs('toggle');

$('body').chardinJs('stop');

 

チュートリアルの開始と終了でイベントを受け取れます。

$(‘body’).on(‘chardinJs:start’, function() {
  alert(“start”);
});

$(‘body’).on(‘chardinJs:stop’, function() { 
  alert(“end”);
});

 

こんな感じで簡単にチュートリアルが作れるChardin.jsでした。

https://github.com/heelhook/chardin.js