モノワスレ

ブログに書いて忘れましょう

jQueryプラグインを作成してみる 01

jQueryのプラグインを探してみたけど、あまり意図しているものがないので作ってみる。
…と言っても真面目に使ったことが無いので慣れるところから。

慣れる

とりあえず簡単なjQueryを利用してみる。

ダウンロード

以下からダウンロードします。
http://docs.jquery.com/Downloading_jQuery#Download_jQuery
今回は練習でjQueryの中身を追うかもしれないので未圧縮版をダウンロードしてみます。
Uncompressedと書いてあるのが未圧縮版です。

簡単なページ作成

プラグイン作るのが目的なので、適当なプラグインを触ってみます。
[角丸をつけるplugin]
http://jquery.malsup.com/corner/
※これもダウンロードして[root]/js配下に保存しておきます。

<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>lab01</title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#div_default").corner();
	$("#div_3px").corner("3px");
});
</script>
<style type="text/css">
.test {
	color: #FFF;
	background-color: #336699;
	margin-top: 5px; 
	padding: 0 4px; }
</style>
</head>
<body>
<div class="test" id="div_default">div_default</div>
<div class="test" id="div_3px">div_3px</div>
</body>
</html>


チュートリアルに従うとわりと簡単に使えるようです。
プラグインの実行を行なっている箇所は、$(document).ready(function() { の部分。
(function(){...})() でも良いような気もするけど作法なので真似しておく。

作ってみる

…と言ってもこれも作法がわからなかったので、KAYACさんのところに書いてあった情報から…
http://tech.kayac.com/archive/jquery-plugin-base.html
4点ほど抜粋して気をつけながら実装してみる。

  1. window.$に依存しない ($.noConflict()時にも動くように)
  2. 最後はreturn this; (method chainが切れるので)
  3. 複数要素が指定されている場合を考慮する (Plugin内のthisは.eachで処理する)
  4. 名前空間を汚染しない (無名関数に閉じているのでPlugin自体の変数も外部から見えない)
(function($) {
    //このPluginの名前
    var name_space = 'lab02';
    $.fn[name_space] = function(options) {
        //いったん退避
        var elements = this;

        //設定情報の構築
        var settings = $.extend({
            //optionの初期値を設定
            'param' : 'value'
        }, options);

        //内部用method
        var inner_method = function () {
            //内部の共通処理の記述
        };

        //要素を一個ずつ処理
        elements.each(function() {
            $(this)
                //イベント等の設定
                .keyup(inner_method)
            ;
        });

        //method chain
        return this;
    };
})(jQuery);

※続きはまた次回。