Python Hack-a-thon 第2回 jQuery plugin作成ハンズオン

jQueryのハンズオンをやりますが全然準備していないので即興でやります。

jQueryを始める上であるとよいもの

jQuery

開発環境

ドキュメント

http://api.jquery.com/browser/
下の方に"INSTALL NOW"とかあるのでクリックしてAdobe Air板をインスコしましょう。

jQuery pluginを作る

各行にcheckboxがあるtableを行clickでチェックのつけ外しをできるようなpluginを作る
http://jsbin.com/uhoxo

まずベタ実装

$('table').find('tr')
.bind('click',function(ev){
var $checkbox = $(this).find(':checkbox');
var isChecked = $checkbox.attr('checked');
$checkbox.attr('checked',!isChecked);
})
.find(':checkbox').bind('click',function(ev){
ev.stopPropagation();
});

ベタ実装をとりあえずplugin化

(function($){

$.fn.tableCheckable = function(){
    // ここのthisがpluginメソッドを読んだjQueryオブジェクト
    // $.eachで全件それぞれに対して処理をしてやる
    $.each(this,function(){
        var $self = $(this);
        if(!$self .is('table')) return;
        // 先程述べた実装をそのまま持ってきた
        $self .find('tr')
        .bind('click',function(ev){
            var $checkbox = $(this).find(':checkbox');
            var isChecked = $checkbox.attr('checked');
            $checkbox.attr('checked',!isChecked);
        })
        .find(':checkbox').bind('click',function(ev){
            ev.stopPropagation();
        });
    });
};

})(jQuery);

このpluginを読み込んだ状態で$('table').tableCheckable();と実行すると、
先程述べた実装と同じ効果になる。
pluginが読み込まれるときに$がjQueryである保証はないので、
以下のコードでくるんでおく。

(function($){
})(jQuery);

optionsを指定可能にする

このように複数のcheckboxがある場合はどうする?
http://jsbin.com/omumo

$('table').tableCheckable({target:'.target'});などのように
対象のcheckboxのCSS セレクタを指定すれば、
そのcheckboxだけチェックのつけ外しをできるようにしたい。
デフォルト値を用意し、べた書きCSS セレクタをそれで置き換え、
その後optionsの値もしくはデフォルト値を使用というように置き換えていく。

(function($){

$.fn.tableCheckable = function(options){
    $.each(this,function(){
        var $self = $(this);
        if(!$self .is('table')) return;
        var target = options.target || $.tableCheckable.defaults.target;
        $self .find('tr')
            .bind('click',function(ev){
                var $checkbox = $(this).find(target);
                var isChecked = $checkbox.attr('checked');
                $checkbox.attr('checked',!isChecked);
            })
            .find(':checkbox').bind('click',function(ev){
                ev.stopPropagation();
            });
    });
};
$.tableCheckable = {};
$.tableCheckable.defaults = {
    target : ':checkbox'
};
})(jQuery);