タイトル長すぎです大橋です。
簡単にWebサイトのチュートリアルとかをサイト上で実現できるintro.jsというのがあります。
これをangularjsでも使えるようにしたangular-introというのがあるのですが、
あまりサイトに細かい導入とかの説明がなかったので記載していきます。
最終的に
↓みたいな奴が出せるようになります。
またデモサイトは→ http://code.mendhak.com/angular-intro.js/ です
インストール
bower経由で使えるのでbowerで取得します。
$ bower install angular-intro.js
bower使っていない場合は、
デモサイトから落とせます。
bowerで取得したり、落としてきたら必要なjsとかcssを読み込みます。
<head>
<!-- なんか他のheadタグ内 -->
<link rel="stylesheet" type="text/css" href="bower_components/angular-intro.js/lib/introjs.css">
</head>
<body>
<!-- なんか他のbodyタグ内 -->
<!-- jquery無くてもいいかも -->
<script src="bower_components/jquery/jquery.min.js" type="text/javascript"></script>
<script src="bower_components/angular-unstable/angular.min.js"></script>
<script src="bower_components/angular-intro.js/lib/intro.min.js"></script>
<script src="bower_components/angular-intro.js/build/angular-intro.min.js"></script>
モジュールの読み込み
モジュールを読み込みます。
angular.module('MyApp', ["angular-intro"])
表示内容の設定
大きく分けて2つの方法で表示できます。
- HTML属性で設定
- javascript objectで設定
またどちらの方法でも以下のng-intro-method, ng-intro-optionsの設定は必要です。
<div ng-intro-method="showHelp" ng-intro-options="option"></div>
ng-intro-methodはintro.jsを起動する際に呼び出すメソッド名です。
メソッド自体は、angular-intro.js自体が設定するようなので
angularjsのコントローラにng-intro-methodで設定したメソッドが無くてもよいです。
ng-intro-optionsはintro.jsを呼び出した後、ツールチップなどの表示順や、表示内容を設定するためのオブジェクトのオブジェクト名を設定する属性です。
ここに書かれた名前のオブジェクトが$scopeに設定されます。
こちらも特にコントローラで設定する必要はありあせんが、
上記のjavascript objectで設定の方法で設定する場合は、このオブジェクトに値を設定していきます。
HTML属性で設定
HTML属性で設定する場合はツールチップを表示したいタグに
data-intro属性と、data-step属性を付けます。
<div data-intro="ツールチップに表示されるテキスト" data-step="何番目に表示するかの数値"></div>
なおこれらの設定やこれ以外に使える属性はintro.jsのサイトを御覧ください。
javascript objectで設定
javascript objectで設定する場合は
コントローラにて$scopeに表示内容を詰めてあげます。
この時$scopeに設定する変数名はng-intro-optionsで設定した名称と同じにします。
$scope.option =
steps:[
{
element: '#step1'
intro: "First tooltip"
}
{
element: '#step4'
intro: "Second tooltip"
position: 'right'
}
]
起動
このツールチップを表示するには
ng-intro-methodで設定したメソッド名のメソッドを呼び出します。
どうやらこのメソッドはangular-intro側で作成してくれるみたいなので、
特にコントローラにて設定する必要はないです。
適当にボタンやアイコンを作ってng-clickで呼び出します。
<button value="Show Help" ng-click="showHelp()"></button>
これで完了です。