【jQuery】Webサービスには欠かせないチュートリアル系プラグイン！intro.js
だいぶ今更感もありますが、今やWEBサービスのユーザーへの操作説明には欠かせない良くあるチュートリアル系のjQueryプラグインです。
その中でもintro.jsはおすすめです。
こういう部分は是非プラグインを使わせてもらって楽しちゃいましょう。
intro.jsプラグインのオススメ/ポイント
- 数あるチュートリアル系のプラグインで一番オシャレで使いやすい
- テーマが５種類ある
- 実装が簡単
intro.jsプラグインのデモ
intro.jsプラグインのページ
intro.jsプラグインの使い方
それではintro.jsプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。
HTMLコード
CSSコード
JavaScriptコード
チェックポイント
サンプルのHTMLのコードで見て頂きたい部分は「data-step」と「data-intro」です。
「data-step」に数値を1から順番に指定すればその順番通りにチュートリアルが進みます。
「data-intro」には説明したい内容を入れれば良いわけです。
チュートリアルスタートはintroJs().start()で動きます。好きなアクションで動かせしましょう。
属性やオプションを使ってtooltipの位置やデザインもCSSで直接変更など出来ますので、詳しくはintro.jsのGihHubページのUsageをご確認ください。
プラグインへ一言
こんなに簡単に実装出来るとは…ありがたい！
このプラグインにビビっときたらシェア
-
-
