jQueryライブラリで、注釈を使用したチュートリアルページの簡単実装
目次
こんにちは、樋口です。
今回は、注釈を使用したチュートリアルページを簡単に実装できる、jQueryライブラリ「Chardin.js」についてご紹介します。
このライブラリを使用すれば、各要素に対する説明が簡単に表示することができます。
今回は下記ライブラリを使用して説明をしていきます。
- jQuery
- 1.10.2
- Chardin.js
- 1.6.2
- BootStrap(CSS使用)
- 3.2.0
ライブラリの入手
chardinは下記公式サイトよりダウンロードできます。
Chardin.jsダウンロード(GitHab)
ページ遷移後、下記ファイルをダウンロードしてきます。
- chardinjs.css
- chardinjs.min.js
ライブラリ使用方法
本ライブラリでは、注釈として表示したい要素に下記項目を設定します。
- data-intro
- 説明本文
- data-position
- 「top」「left」「right」「bottom」(注釈表示向き)
HTMLファイル
まずは、HTMLファイルを作成します。
– index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <title>Chardin.jsサンプル</title> <link rel="stylesheet" href="bootstrap.min.css"> <link href="chardinjs.css" rel="stylesheet"> </head> <body> <div id="wrap"> <div class="container"> <div class="col-lg-12"> <div class="form-group" style="margin-top: 40px;"> <label style="font-size: 20px;">Chardin.jsサンプル</label> </div> <form class="form-signin" id="commentForm"> <div class="col-lg-12"> <div class="form-group" style="margin-top: 10px;"> <label class="control-label col-lg-2" style="font-size: 20px;">名前</label> <div class="col-lg-4"> <input class="form-control" id="cname" name="name" type="text" data-intro="名前入力項目です。" data-position="top"> </div> </div> </div> <div class="col-lg-12" style="margin-top: 10px;"> <div class="form-group"> <label class="control-label col-lg-2" style="font-size: 20px;">セレクトボックス</label> <div class="col-lg-4"> <select class="form-control" data-intro="セレクトボックスです。" data-position="right"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> </div> <div class="col-lg-12" style="margin-top: 10px;"> <div class="form-group"> <label class="control-label col-lg-2"></label> <div class="col-lg-4"> <img src="image.jpg" class="img-responsive" data-intro="自作画像です。" data-position="left"> </div> </div> </div> <div class="col-lg-12" style="margin-top: 10px;"> <div class="form-group"> <label class="control-label col-lg-4"></label> <div class="col-lg-4"> <button type="button" style="width: 150px;" class="btn btn-info" id="info-on" data-intro="チュートリアルを表示。" data-position="bottom"> チュートリアルON </button> </div> </div> </div> </form> </div> </div> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="chardinjs.min.js"></script> <script type="text/javascript" src="test.js"></script> </body> </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
(function(){ $('#info-on').click(function(){ $('body').chardinJs('start'); }); })();
3行目:
「$(‘body’).chardinJs(‘start’)」を呼び出すことによりチュートリアルがONとなります。
実行結果
最後に、実行イメージを下記に載せます。
– 起動時
– 「チュートリアルON」ボタン押下時
最後に
今回紹介したライブラリを使用すれば、チュートリアルや説明ページを簡単に作成できます。
ぜひ使用してみてください!
今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。
それではまた。