でぃべろっぱーず・さいど

jQueryのお勉強に、ってことでプラグインを作ってみました。

参考にしたのは↓こちらの記事。

jQuery のプラグインを作成する : ブログの新着記事を表示：Goodpic

(function() { $.fn.myplugin = function(config){ config = jQuery.extend({ value1: "Default value 1", value2: "Default value 2" },config);

var target = this;
target.append("Hello jQuery Plugin !
"
+ config.value1 + "
" + config.value2);
};
})(jQuery);

↑こんな感じで、$.fn のプロパティとして関数を作成してやればOK。簡単。

注意点は、関数名を他のプラグインと被らないようにするってことと、メソッドチェーンしても良い関数のときには、最後に return this するのを忘れないようにするってことかな。

で、作ったのが↓以下の2本。

・jquery.numericoption.js
・jquery.datepulldown.js
(2007.12.16 追記)
結局1本にまとめました。
jquery-selectbox-utils-0.1.0.js
(2007.12.16 追記 ここまで)

numericoption.js の方は、

$('#month').numericOptions({from:1,to:12,selectedIndex:5,namePadding:2});

↑こんな風にして、使って、1から12までのオプションタグをappend するってプラグインです。

config の値として渡せるのは、以下のもの。

remove : 既存のoption タグを削除するかどうか。default は true
from : 開始の値。default は 1
to : 終了の値。default は 31
selectedIndex : 生成後に選択済みにしておくオプションタグの index。default は 0
valuePadding : value 値の左0詰め桁数。default は 0
namePadding : name 値の左0詰め桁数。default は 0

動的にオプションタグの値を変えたいときに地味に便利です。

でもって、それを利用しているのが、datepulldown.jsの方。

$('#date1').datePulldown({year:$('#year1'),month:$('#month1')});

↑こんな感じで使います。

これで、year と month に指定した値が変わったときに、指定したタグの下にその年月に応じた日数のプルダウンを生成します。

デモ見てもらった方が早いと思うので、↓デモページをどうぞ。一番下の奴です。

jQuery plugin --- selectbox-utils Demo page

コードはいつものようにGoogle code でホスティングしてます。

jquery-selectbox-utils - Google Code