勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

chardin.jsを利用して注釈を入れる

      2014/07/03

簡易マニュアルとかでむっちゃ使えそう。

■chardin.js
http://heelhook.github.io/chardin.js/

■使い方
jqueryとchardin.jsとCSSを呼び出す。
<link href="chardinjs.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="chardinjs.min.js"></script>
↓↓
data-intro="注釈内容" data-position="注釈の場所"をタグに入れる。
<input type="text" name="name" data-intro="ここは名前" data-position="right" />
↓↓
トリガーになるものを作っとく。ボタンが楽で汎用性ありそう。
<input type="button" value="説明" id="manu">
↓↓
ボタンを押した時に動くようにする。
<script>
$(function(){
$('#manu').click(function(){
$('body').chardinJs('start');
});
});
</script>

■サンプル
http://sample.taitan916.info/chardin/

■ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transtional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html"/>
<meta cherset = "UTF-8">
<link href="chardinjs.css" rel="stylesheet">
<style>
table,tr,td,th {
border: 1px solid;
border-collapse:collapse;
padding: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="chardinjs.min.js"></script>
<script>
$(function(){
$('#manu').click(function(){
$('body').chardinJs('start');
});
});
</script>
<html lang="ja">
<head>
<title>Chardin.js</title>
</head>
<body>
<h1>Chardin.js</h1>
<input type="button" value="説明" id="manu"><br><br>
<form>
名前:<input type="text" name="name" data-intro="ここは名前" data-position="right" /><br />
本文:<textarea data-intro="ここは本文" data-position="right"></textarea><br />
</form><br />
<table data-intro="ここはテーブル" data-position="right">
<tr>
<th>名前</th>
<th>本文</th>
</tr>
<tr>
<td>田中さん</td>
<td>本文あああ</td>
</tr>
<tr>
<td>山田さん</td>
<td>本文いいい</td>
</tr>
</table>
</body>
</html>

 - JavaScript, jQuery

  関連記事

JavaScriptでAjaxを使わずにクロスドメインから変数を取得する

JavaScriptの配列形式で出力するファイルを作成しておき、 動的にソースに ...

PHPの配列をファイルに保存してPHPやJSで呼び出す

PHPの配列をファイルとして保存し、別のページからPHPやJavaScriptで ...

スマホ対応のjQueryのカラーピッカープラグイン

以前の記事でカラーピッカープラグインのことを書いたけど、スマホでは使えない。なの ...

GoogleMapAPIでヒートマップを表示する方法

GoogleMapAPIで花粉状況や雨量を可視化しやすいようなヒートマップ的なも ...

JavaScriptでFlashのバージョンを取得

既存のソースでFlashのバージョン取得を 行っているものがあり、使いそうなので ...

javascriptでのについて

javascriptを書く際に、 <script> <!-- ...

リアルタイムプレビュー時の改行とテーブルの上部揃え

■サンプル http://sample.taitan916.info/previ ...

jQuery.browser~みたいなエラーが出た

jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...

JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...

画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...