jQueryプラグインを作成する方法

2014/07/08

jQueryのプラグインを作ってみたかった。

というのも大抵のものはググったらあるんだけど、しょっちゅう使うような自作関数や、自分で書いたjavascriptをプラグイン化できたら、カスタマイズもしやすそう。

なので、どうやって作るのか調べたところ、簡単なものならすぐ作られそう。

下記ページでメモっていた部分をプラグイン化した場合、

JavaScriptだけでTOPへ戻るリンクの表示

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);

(function($) {

$.fn.pagetop = function(scroll = 300){

jQuery("body").append('<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>');

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>