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>
関連記事
-
-
ページのリロード、ページの戻る
ブラウザのリロードと同じようなボタンを作成してほしいとの 要望があって色々あった ...
-
-
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 ...
- PREV
- PHPでのcookie
- NEXT
- テキストエリアを自動でリサイズ