jQueryプラグインが意外と簡単に作れる話
2013 年 7 月 22 日 by 山平画面周りのちょっとした処理をjavascriptで関数化することはよくありますが、規模が大きくなってくると本来のロジックが見えにくくなってしまってあまりよろしくないなあ、と思うことが多々あります。
過去にjQueryプラグインのソース解析に挫折したことがあって作るのも難しいと思い込んでいたのですが、実はとっても簡単でしたのでご紹介します。
jQueryプラグインの作り方
ネットで検索するとたくさん出てきますが、こちらのサイトがわかりやすいと思います。
基本、
- プラグイン（メソッド）名
- オプション引数の処理
- 実際の処理
- メソッドチェイン
この4点を抑えておけば簡単に作れてしまいます。
作ってみる
試しにプラグインを作ってみます。
今回は、文字列から画像を取得するWebサービス「mebe（http://mebe.co/）」と組み合わせてみます。
対象タグの中身の文字列から画像のダイアログを表示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery plugin sample</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
(function($) {//プラグインの設定
$.fn.testPlugin = function( options ){
var setting = $.extend( {}, options );//今回はオプションなし
// プラグインの処理
this.each(function(i){
var text = encodeURIComponent($(this).html().replace("\n", "_"));
var url = "http://mebe.co/" + text + ".jpeg";
var tag = $("<img src='" + url + "' />");
$(tag).dialog({ autoOpen: false });
$(this).on("click", function(){ $(tag).dialog( "open" ); });
});
return( this );// メソッドチェインに対応させる
}
})(jQuery);
$(function(){
//使ってみる
$("li").testPlugin();
});
</script>
</head>
<body>
<ul>
<li>貞子</li>
<li>cat</li>
<li>motogp</li>
</ul>
</body>
</html>
以上です。
タグ: HTML5, JavaScript, jquery, オープンソース, プラグイン
