jQueryプラグインを作成する方法
jQueryのプラグインを作ってみたかった。
というのも大抵のものはググったらあるんだけど、しょっちゅう使うような自作関数や、自分で書いたjavascriptをプラグイン化できたら、カスタマイズもしやすそう。
なので、どうやって作るのか調べたところ、簡単なものならすぐ作られそう。
下記ページでメモっていた部分をプラグイン化した場合、
JavaScriptだけでTOPへ戻るリンクの表示
https://taitan916.info/blog/?p=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="http://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>
サンプル
http://sample.taitan916.info/plugin/
無名関数でくくって、あとは処理内容を書いていくだけで良いみたい。しょっちゅう使うものに関してはプラグイン化してまとめて所持しておくと便利そうですね。
参考サイト
関連記事
PHPとajaxでチャットの作成
■ソース ・index.php <? error_reporting(E_ ...
「jQuery.browser is undefined」エラーの対応方法
jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...
htmlタグが入った内容の文字を丸める
phpである文字列が○文字以上だった際、 省略してお尻に「……」をつけたいという ...
jQueryuiを用いてメールの入力補助(サジェスト)
autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...
FormDataを使ったAjax通信がiPhoneのみエラー
FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...