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

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

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

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

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

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

ダウンロード

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

ダウンロード

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

データを解凍します STEP2

データを解凍

データが入っています。

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

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

HTMLを設置します STEP4

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

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

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

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

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

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

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

まとめ

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*