指定した要素に注釈を設定できる「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>
関連記事
-
-
jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法
jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...
-
-
jQueryでiframe内の要素を呼び出し
jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...
-
-
jQselectableでセレクトボックスをリッチにする
入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...
-
-
Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法
サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように ...
-
-
jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法
先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...