指定した要素に注釈を設定できる「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のJSONP使用でPHPで作った配列をJSに返す方法
AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...
-
-
テキストエリアを選択すると中身を全選択状態にする方法
テキストエリアやテキストボックスの中に文字が書いてあり、ドラッグをしなくても、そ ...
-
-
jQselectableでセレクトボックスをリッチにする
入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...
-
-
オリジナルのjQueryプラグインを作成する方法
オリジナルのjQueryプラグインを作ってみたかった。というのも大抵のものはググ ...
-
-
jQueryで画像を遅延ロードする「jquery.lazyload.js」の利用方法
画像を遅延ロードさせたい時にはjQueryプラグインのlazyloadが便利。以 ...