jQueryでヘルプ画面を作る Chardin.js
2013.04.10・Cat：javascript jQuery jQueryプラグイン 役員
面白いjQueryを見つけた。
http://heelhook.github.io/chardin.js/
要素に説明を入れられるプラグインのようで、早速LaunchCartの管理画面のヘルプ画面を作ってみた。
※なんでも良いのでキーボードを押して下さい
設置は簡単で、HTMLの要素に、例えばデモの左上「商品」部分であれば
|
1 |
<li data-intro="商品管理へ遷移します" data-position="right"> |
というように
data-intro → 説明文
data-position → left、right、bottom、topというふうに位置を指定
実行は
|
1 |
$( 'body' ).chardinJs(); |
とするだけでOK。
今回は
|
1 2 3 4 |
$( document ).keydown(function(e) { $( 'body' ).chardinJs(); }); |
とした。
ヘルプ以外にも、詳しい商品説明やアプリケーションのチュートリアルなどに使えそうだ。
