Blog

スターフィールド株式会社 > Blog > 制作 > javascript > jQueryでヘルプ画面を作る Chardin.js

jQueryでヘルプ画面を作る Chardin.js

面白いjQueryを見つけた。

要素に説明を入れられるプラグインのようで、早速LaunchCartの管理画面のヘルプ画面を作ってみた。

※なんでも良いのでキーボードを押して下さい

設置は簡単で、HTMLの要素に、例えばデモの左上「商品」部分であれば

<li data-intro="商品管理へ遷移します" data-position="right">

1	<li data-intro="商品管理へ遷移します" data-position="right">

というように

data-intro → 説明文

data-position → left、right、bottom、topというふうに位置を指定

実行は

$( 'body' ).chardinJs();

1	$( 'body' ).chardinJs();

とするだけでOK。

今回は

$( document ).keydown(function(e)
{
	$( 'body' ).chardinJs();
});

$( document ).keydown(function(e)

{

$( 'body' ).chardinJs();

});

とした。

ヘルプ以外にも、詳しい商品説明やアプリケーションのチュートリアルなどに使えそうだ。