勉強したことのメモ

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

  関連記事

1422186794_sqliteicon
PHPとSQLiteでi-mobileのデータをグラフ化

i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...

jquery_logo
jQueryのfind時に複数のセレクタ指定

<div id="hoge"> <a href="aaa.ht ...

jquery_logo
jQueryでUNIXタイムスタンプの取得

jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...

javascript_logo_unofficial-300x300
ページのリロード、ページの戻る

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

jquery_logo
jQueryの指定されたイベントを実行する(trigger)

jQueryで $('ID').trigger('click'); というみたこ ...

javascript_logo_unofficial-300x300
クロスドメイン突破をjavascriptで行う

ajaxとかでクロスドメインを突破する際は、 PHPファイルを介すかJSONPを ...

mzl.qobqfuxq
GoogleMapsAPIでマーカーが全て表示されるように自動ズーム

GoogleMapsAPIでマーカーを複数設置した場合にズームの値や、マーカーの ...

jquery_logo
jQueryで電話番号チェック

やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...

javascript_logo_unofficial-300x300
javascriptの注意点

javascriptにてチェックボックスのチェック状況をチェックを ループでまわ ...

javascript_logo_unofficial-300x300
JavaScriptで画像に光沢をつける(glossy.js)

凄く簡単に光沢がつけられるライブラリがあったのでメモ。 ライブラリを呼び出してc ...