one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【37:自作JQueryプラグイン 】クリックするとメッセージ表示するJQueryをプラグイン化

f:id:seintoseiya:20150913230956p:plain
プロジェクトNo.37:自作JQueryプラグイン - DEMO

これまで既存のJQueryプラグインをいくつか使ってみたが、
自分でも簡単に作れるようなのでやってみた。
仕様は、クリックするとメッセージが表示されるものになります。

JQueryプラグイン

まずはいつも通り実装

まずは普通にJQueryで実装したい内容を書きます。
今回は「クリックするとメッセージが表示される」というシンプルなものを用意しました。


最初にHTMLに表示する画像を用意します。
その際にdata属性を記述しておき、表示するメッセージ内容や、そのフォントサイズなどを指定しておきます。

HTML
<body>
	<h1>自作JQueryプラグイン</h1>
	<h2>画像をクリックしてメッセージ表示</h2>
	<p><img src="img/c1.jpg" data-size="50" data-message="ゾウ"></p>
	<p><img src="img/c2s.jpg" data-size="10" data-message="サボテン"></p>
	
	<script src="./js/jquery1.6.4.min.js"></script>
	<script src="./js/jquery.showsize.js"></script>
	<script src="./js/main.js"></script>
</body>


クリックイベントとcss指定を行い、div要素を生成します。

JavaScript(main.js)
$(function () {
$(img).click(function(){
	var msg = $(this).data().message;
	$(this).wrap('<div style="position:relative;")></div>');
	var div = $('<div>')
				.text(msg)
				.css('position', 'absolute')
				.css('top', '0')
				.css('background', 'black')
				.css('color', getRandomColor())
				.css('font-size', $(this).data().size + 'px')
				.css('opacity', 0.9)
				.css('padding', '2px');
	$(this).after(div);
});
});

JQueryの外部化(プラグイン化)

まずは新しくJSファイルを作成します。
jquery.showsize.js

これがプラグインになります。
HTMLで作ったプラグインを指定。

HTML
<script src="./js/jquery.showsize.js"></script>

先ほど作ったmain.jsの内容をjquery.showsize.jsに移していきます。
main.jsではこの後に作るjquery.showsize.jsのshowsizeメソッドを記述します。

JavaScript(main.js)
$(function () {
	$('img').showsize({
		// size : 20,
		opacity: 0.5
	});
});

jquery.showsize.jsの内容です。

JavaScriptjquery.showsize.js)
;(function($) { // この;は他のファイルの;漏れのための予防

	$.fn.showsize = function(options){
		var elements = this; // このthisは指定した全ての要素(この場合2つのimg)
		elements.each(function(){
			var opts = $.extend({}, $.fn.showsize.default, options, $(this).data()); // $.extendは後ろの引数の方が優先度が高い

			$(this).click(function(){ // このthisは1つのimg
				var msg = opts.message;
				$(this).wrap('<div style="position:relative;")></div>');
				var div = $('<div>')
							.text(msg)
							.css('position', 'absolute')
							.css('top', '0')
							.css('background', 'black')
							.css('color', getRandomColor())
							.css('font-size', opts.size + 'px')
							.css('opacity', opts.opacity)
							.css('padding', '2px');
				$(this).after(div);
			});
		});
		return this; // チェーンメソッドのため
	};

	function getRandomColor(){
		var colors = ['white', 'pink', 'orange', 'green'];
		return colors[Math.floor(Math.random() * colors.length)];
	}

	$.fn.showsize.default = {
		size: 10,
		opacity: 0.9
	}
})(jQuery);

まずは基本的なひな形として、下記の様に記述します。

;(function($) { // この;は他のファイルの;漏れのための予防
	$.fn.showsize = function(){ // このshowsizeはプラグイン名を指定

	}
})(jQuery);

今回はmain.jsからオプションを指定しているので、

$.fn.showsize = function(options){

という風に変更します。

この中でeachメソッドを用いてそれぞれの要素に対して、cssを指定しています。
後は最初にmain.jsで記述していた内容をコピーして、オプションなどの部分を変更してあげれば完成です。
また最後にdefault設定も指定しておくと良いでしょう。

$.fn.showsize.default = {
	size: 10,
	opacity: 0.9
}

全ソースはこちら

github.com

関連アプリ・書籍

jQuery入門道場

jQuery入門道場

jQuery レッスンブック jQuery2.X/1.X対応

jQuery レッスンブック jQuery2.X/1.X対応