jQuery

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を使えば時間はかかりませんね。

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

しん

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

-jQuery

© 2020 Sedori Plan