最近チュートリアルを実現したり,特定の要素をハイライトしたり,用途的に似たようなライブラリがぽこぽこ出てきてどれがいいのか試したのでまとめてみる.
Chardin
http://heelhook.github.com/chardin.js/
Apache License v2.0
概要
一度に複数の要素に対して,説明を書ける.
ステップで実行などはないが,completion handlerで再度実行すればできる.
Gmailの新機能で使われたチュートリアル風味.
実現方法はbody直下に黒半透明オーバーレイ要素を重ね,その後ろに説明用のレイヤーを追加する.ハイライトする要素をオーバーレイより大きいz-indexを追加し,上に持ってくる.
ハイライトする要素にz-indexがinline styleで付いていると隠れてしまう.
導入方法
css追加
1 2 3 4 5 |
|
js追加
1
|
|
data-intro
をハイライトする要素の属性に追加.
data-position
にleft
・top
・right
・bottom
のどれかを指定(説明文が出る位置)
1
|
|
ロード時に実行
1 2 3 4 5 |
|
ハイライト開始時と終了時のイベントを受け取れる
1 2 3 4 5 6 7 8 |
|
jQuery Highlighter
http://www.dailymarkup.com/
MIT
概要
白いBoxshadowをつけてて、要素が光ってるようなハイライトができてかっこいい。
ハイライトしたい要素をcloneして、オーバーレイの上にコピペして実現.
指定した要素だけをcloneして,上に重ねるため,cssの書き方によっては(親要素を指定しているなど)デザインが崩れる.
アルファ版らしく,本番運用非推奨.
導入方法
css追加
1 2 3 4 5 |
|
js追加
1
|
|
コントローラにハイライトしたい要素のid(ここではmenu
)を指定し,relにハイライト時に表示されるメッセージを指定する
1 2 3 |
|
ロード時に実行
1 2 3 4 5 |
|
jquery-tutor
https://github.com/crocos/jquery-tutor
3-clause BSD license
概要
ステップ1、ステップ2のように流れに沿って要素をハイライトしたり,jsの処理を順次実行出来る.
実現方法は要素の周りに太い半透明borderを重ねて実現.
borderで実現しているのが影響してか見た目が良くない.
導入方法
css追加
1 2 3 4 5 |
|
js追加
1
|
|
stepsの配列に順次ハイライトしたい要素とメッセージのオブジェクト(target, message)やjsのfunctionをそのまま入れたりしていく. deferredを使うと非同期実行などもできる.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
Introjs
http://usablica.github.io/intro.js/
MIT
概要
角丸四角でハイライトされて,ステップ数のバッヂや次のステップへ進む,前のステップへ戻るボタンなどが表示されて親切な感じ
黒半透明のオーバーレイ要素を対象要素の後ろにz-index高めで追加して対象の要素に.introjs-showElement
を付けてz-indexをオーバーレイ要素より高めてハイライトする形式.
inline styleでz-indexを追加していると後ろに隠れてしまってハイライト要素が見えないという状態になる.
画面端の要素をハイライトすると,バッヂが隠れてしまったりもする.
導入方法
css追加
1 2 3 4 5 |
|
js追加
1
|
|
data-step
とdata-intro
をハイライトする要素の属性に追加.
data-position
は指定したければ指定する.
1
|
|
ロード時に実行
1 2 3 4 5 |
|
ステップ移行時や完了,離脱時のcallbackを設定できる.
まとめ
見た目的にはchardinやintro.jsが良い感じ.
チュートリアル的に使うならintro.jsかな.
1枚画面でさっと機能を提示したいだけならchardinが良いのではないか.
この種のライブラリは複雑な構成(z-indexをjsでinline styleとして書き換えたり,absoluteやfixedで配置をダイナミックにしているなど)を取ってると微妙に要素が隠れたり,ハイライトがずれたりするので注意が必要.