勉強したことのメモ

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

オリジナルのjQueryプラグインを作成する方法

   2024/04/18  jQuery

オリジナルのjQueryプラグインを作ってみたかった。というのも大抵のものはググったらあるんだけど、よく使うような自作関数や自分で書いたjavascriptをプラグイン化できたらカスタマイズもしやすそう。なので、どうやって作るのか調べたところ、簡単なものならすぐ作られそう。以下に作成方法をメモ。

 

前提

今回は以下過去記事のソースをプラグイン化する。

https://taitan916.info/blog/archives/107

 

ソースコード

test.js

(function($) {
    $.fn.pagetop = function(scroll = 300){
        jQuery("body").append('<!--TOPへ戻る--><a href="#top" id="backtop" style="bottom: 20px;display: none;position: fixed;right: 20px;z-index: 9999; padding: 10px; background: #262626; color:#fff;">TOP</a><!--TOPへ戻る-->');
        if (document.addEventListener) {
            window.addEventListener("scroll", scrollToggle, false);
        } else {
            window.attachEvent("onscroll", scrollToggle);
        }
        function scrollToggle(e){
            var scl = document.documentElement.scrollTop || document.body.scrollTop;
            document.getElementById("backtop").style.display = scl > scroll ? 'block' : 'none';
        }
    }
})(jQuery);

index.html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
<script type="text/javascript" src="test.js"></script>
<script>
$(function(){
    $().pagetop();
});
</script>

 

サンプル

https://taitan916.info/sample/plugin/

 

所感

無名関数でくくって、あとは処理内容を書いていくだけで良いみたい。しょっちゅう使うものに関してはプラグイン化してまとめて所持しておくと便利そう。

 

参考サイト

https://webdrawer.net/javascript/jqplugin.html

 - jQuery

  関連記事

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

jQueryのloadメソッドでファイル(ページ)を呼び出す

サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...

jQueryでHTMLの特定要素をループ時に逆順で処理する方法

jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、 ...

フォームの入力・選択内容を自動保存してくれる「Garlicjs」プラグインの利用方法

お問い合わせページ等、フォームを設置したページで入力・選択した内容を保存したい。 ...

jQueryでformの各種パーツ(テキストボックス等)の操作まとめ

jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...