勉強したことのメモ

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

  関連記事

ページのリロード、ページの戻る

ブラウザのリロードと同じようなボタンを作成してほしいとの 要望があって色々あった ...

table内のiframeのheightを最大高さにする

tableのtdの中にリンクがあり、クリックすると td内でiframeが開く。 ...

imgタグで作成したグラフをjQueryでリアルタイムに動かす

このグラフをリアルタイムプレビューさせる。 ■サンプル http://sampl ...

imgタグとPHPでグラフ作成

プラグインやライブラリを使わずにグラフを作る 機会があったのでメモ。 ■サンプル ...

jQueryで要素のleftやwidthを取得

jQueryで要素のposition(leftやtop)とwidthとheigh ...

submit関連のjQuery2

<?php error_reporting(E_ALL & ~E_ ...

javascriptでゼロパティング

月日をゼロパディングしたかったけど PHPとは違い、そういった関数は無かったので ...

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

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

jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...

複数のajax処理の結果をまとめて表示

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...