おすすめグッズや役立つ情報ブログ

Sedori Plan

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

スポンサーリンク

アドセンス

アドセンス

  • この記事を書いた人
  • 最新記事

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-jQuery

Copyright© Sedori Plan , 2018 All Rights Reserved.