指定した要素に注釈を設定できる「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>
関連記事
-
-
HTMLのカスタムデータ属性をjQueryで取得する際はキャッシュに注意する
ASPを使用したサイトでHTMLのカスタムデータ属性を取得し色々処理したかったん ...
-
-
ajaxのエラー詳細を取得する
success or errorで分岐処理はできるけど、 エラー詳細取れないの? ...
-
-
SortableJSを使ってデータの並べ替え&保存
あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...
-
-
jQuery Nice Selectを特定ページのみ無効にする方法
bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ...
-
-
DateTimePickerで特定日にClassを付与&選択不可にする方法
jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...