intro_jsのデモページ

【jQuery】Webサービスには欠かせないチュートリアル系プラグイン!intro.js

2014.11.04   968


だいぶ今更感もありますが、今やWEBサービスのユーザーへの操作説明には欠かせない良くあるチュートリアル系のjQueryプラグインです。
その中でもintro.jsはおすすめです。
こういう部分は是非プラグインを使わせてもらって楽しちゃいましょう。

 

intro.jsプラグインのオススメ/ポイント

  •   数あるチュートリアル系のプラグインで一番オシャレで使いやすい
  •   テーマが5種類ある
  •   実装が簡単

intro.jsプラグインのデモ


intro.jsプラグインのページ


intro.jsプラグインの使い方

それではintro.jsプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<input type="button" id="start-introjs" value="チュートリアル開始">
<img src="image1.jpg" data-step="1" data-intro="ここに説明文">
<img src="image2.jpg" data-step="2" data-intro="ここに説明文">
<div class="hoge" name="hoge" data-step="3"  data-intro="ここに説明文">

CSSコード

<link href="./introjs.css" rel="stylesheet">

JavaScriptコード

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./intro.js"></script>
<script>
$(function(){
    $('#start-introjs').click(function(){
        introJs().start();
    });
});
</script>

チェックポイント

サンプルのHTMLのコードで見て頂きたい部分は「data-step」と「data-intro」です。
「data-step」に数値を1から順番に指定すればその順番通りにチュートリアルが進みます。
「data-intro」には説明したい内容を入れれば良いわけです。

チュートリアルスタートはintroJs().start()で動きます。好きなアクションで動かせしましょう。
属性やオプションを使ってtooltipの位置やデザインもCSSで直接変更など出来ますので、詳しくはintro.jsのGihHubページのUsageをご確認ください。

プラグインへ一言

こんなに簡単に実装出来るとは…ありがたい!

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております