指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法
2024/05/19
指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.js」の利用方法及びサンプルをメモ。
Chardin.js
GitHub
https://github.com/xeroxoid/chardin-js
CDN
https://cdnjs.com/libraries/chardin.js/0.1.2
サンプル
https://taitan916.info/sample/chardin/
「説明」ボタンをクリックすると注釈が表示される筈。
利用方法
ソースコード
<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> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="chardinjs.min.js"></script> <script> $(function(){ $('#manu').click(function(){ $('body').chardinJs('start'); }); }); </script>
関連記事
-
-
Ajaxで負荷軽減
業務中、専用のページでfile_get_contents的なものは あまり使わな ...
-
-
jQueryで電話番号チェック
やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...
-
-
画像アップロード前の時点で画像が選択されているか確認
やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...
-
-
jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...
-
-
PHPとSQLiteでi-mobileのデータをグラフ化する方法
i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...