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>
関連記事
-
さくらのレンタルサーバでCookieが正常に保存できない場合の対応方法
さくらインターネットのレンタルサーバでjquery.cookie.jsを用いてC ...
-
jQueryでformの各種パーツ(テキストボックス等)の操作まとめ
jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...
-
PHPとSQLiteでi-mobileのデータをグラフ化する方法
i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...
-
テキストエリアのリアルタイムプレビュー
テキストエリア内に書いた内容をリアルタイムで プレビューする機能が必要となり、教 ...
-
スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア(Fotorama)
タブレット＆スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...