Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

jQuery

jQuery 「intro.js」を使って簡単にチュートリアルが実装できる方法(サンプル付き)

更新日:

jQuery 「intro.js」を使って簡単にチュートリアルが実装できる方法(サンプル付き)

フォーム入力、ダウンロードの仕方、会員登録などやり方を画像キャプチャーで撮って「始めにここに入力してください」「次は~」とチュートリアルを作るのが大変なときがあります。

今回は、簡単にチュートリアルが実装できるintro.jsを使ってみます。

URLhttp://usablica.github.io/intro.js/

ファイルをダウンロード STEP1

ダウンロード

Downloadをクリックしてください。

ダウンロード

Zipファイルをクリックしてファイルをダウンロードしてください。

データを解凍します STEP2

データを解凍

データが入っています。

HTMLに実際に動く記述を書きます STEP3

<script>
		jQuery(function($){
		  $('body').on('click', '#demo_introjs', function(){
			introJs().start();
		  });
		});

	</script>

「introJs().start();」をクリックしたらチュートリアルが始まる仕組みです。

HTMLを設置します STEP4

<button onClick="introJs().start()">チュートリアルスタート</button>


<form action="" method="post">
<table width="580" >
  <tbody><tr>
    <th data-intro="お名前を入力してください" data-step="1">お名前</th>
    <td><input type="text" id="name" name="name"></td>
  </tr>
  <tr>
    <th data-intro="メールアドレスを入力してください" data-step="2">メールアドレス</th>
    <td><input type="text" id="mail" name="mail"></td>
  </tr>
  <tr>
    <th data-intro="お住まいを入力してください" data-step="3">お住まい</th>
    <td><input type="text" id="add" name="add">&#12288;※愛知県</td>
  </tr>
  <tr>
    <th data-intro="お問い合わせ内容を入力してください" data-step="4">お問い合わせ内容</th>
    <td><textarea id="memo" name="memo"></textarea></td>
  </tr>
</tbody></table>
<p class="mT20"><input type="submit" value="確認する" name="submit"></p>
</form>

ボタンを作ってクリックしたらチュートリアルが始まります。

順番に入力した先を表示させるようにするために「data-step="1"」を入れます。次に表示させたい場合は「data-step="2"」を入れます。

「data-intro="お名前を入力してください" data-step="1"」

intro.jsのjQueryファイルを付けます STEP5

css、jQueryファイルを付けます

赤枠で囲った
「intro.js」
「introjs.css」
を追加します。

※cssとjsファイルはご自身の環境に合わせてください

	<link rel="stylesheet" href="css/025/introjs.css" />
	<script src="js/025/intro.js"></script>

まとめ

[サンプル] 簡単にチュートリアルが実装できる

チュートリアルを簡単に出来るプラグインの紹介でした。
画像をキャプチャーして貼り付けて説明文書いてとやらなくてもこのjsを使えば時間はかかりませんね。

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-jQuery

Copyright© Sedori Plan , 2019 All Rights Reserved.