オリジナルのjQueryプラグインを作成する方法
2024/04/18
オリジナルの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/
所感
無名関数でくくって、あとは処理内容を書いていくだけで良いみたい。しょっちゅう使うものに関してはプラグイン化してまとめて所持しておくと便利そう。
参考サイト
関連記事
-
-
jQselectableでセレクトボックスをリッチにする
入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...
-
-
jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法
jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...
-
-
SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法
サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...
-
-
AjaxにてHTTPリクエストメソッドをDELETE / PUTで送信する方法
あるAPIにAjaxでリクエストする際、GET / POSTではなくDELETE ...
-
-
フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法
formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...