AMG Solution

jQueryライブラリで、注釈を使用したチュートリアルページの簡単実装

こんにちは、樋口です。

今回は、注釈を使用したチュートリアルページを簡単に実装できる、jQueryライブラリ「Chardin.js」についてご紹介します。
このライブラリを使用すれば、各要素に対する説明が簡単に表示することができます。

今回は下記ライブラリを使用して説明をしていきます。

jQuery
1.10.2
Chardin.js
1.6.2
BootStrap(CSS使用)
3.2.0

ライブラリの入手

chardinは下記公式サイトよりダウンロードできます。
Chardin.jsダウンロード(GitHab)
ページ遷移後、下記ファイルをダウンロードしてきます。

  1. chardinjs.css
  2. chardinjs.min.js

ライブラリ使用方法

本ライブラリでは、注釈として表示したい要素に下記項目を設定します。

data-intro
説明本文
data-position
「top」「left」「right」「bottom」(注釈表示向き)

HTMLファイル

まずは、HTMLファイルを作成します。

– index.html

24行目
 「data-position=”top”」を指定しています。
 これで、チュートリアルで「data-intro」に指定した値が、項目の上に表示されます。

32~38行目:
 「data-position=”right”」を指定しています。
 これで、チュートリアルで「data-intro」に指定した値が、項目の右に表示されます。

46行目:
 「data-position=”left”」を指定しています。
 これで、チュートリアルで「data-intro」に指定した値が、項目の左に表示されます。

54行目:
 「data-position=”bottom”」を指定しています。
 これで、チュートリアルで「data-intro」に指定した値が、項目の下に表示されます。

62~63行目:
 「jQuery」と「chardinjs」のライブラリを読み込んでいます。

以上で、HTMLは完成です。
サンプルを見てわかるように、さまざまなHTML要素に対して、設定を行うことが可能です。
次に、チュートリアル機能をONにするための、javaScriptについて説明します。

javaScriptファイル

次に、ライブラリ実行用のjavaScriptファイルを作成します。

– test.js

3行目:
 「$(‘body’).chardinJs(‘start’)」を呼び出すことによりチュートリアルがONとなります。

実行結果

最後に、実行イメージを下記に載せます。

– 起動時
1a-1

– 「チュートリアルON」ボタン押下時
2a-1

最後に

今回紹介したライブラリを使用すれば、チュートリアルや説明ページを簡単に作成できます。
ぜひ使用してみてください!

今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。

それではまた。

《関連記事》
jQueryライブラリを使用して、簡単Form項目の入力チェック実装

HIGUCHI'S BLOG

樋口一成の記事

樋口一成の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

新卒採用
はじめました。
LOADING