指定した要素に注釈を設定できる「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プラグインを作成する方法
オリジナルのjQueryプラグインを作ってみたかった。というのも大抵のものはググ ...
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
jQueryで後から追加された要素にイベントを設定
jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...
-
-
DateTimePickerで特定日にClassを付与&選択不可にする方法
jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...
-
-
jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方
divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...