勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法

   2024/05/19  jQuery JavaScript

指定した要素に注釈を入れることができる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 JavaScript

  関連記事

jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法

jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...

jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...

jQselectableでセレクトボックスをリッチにする

入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...

Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法

サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように ...

jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...