jQuery

【jQuery】テーブルの行をアニメーションさせる。

テーブルrowはアニメーションに対応していないため、ちょっとトリッキーなことをしないとslideDown、slideUpが出来ない。
今回それを簡単に実現してくれるすばらしいプラグインをstackoverflowで見つけたので保存代わりにメモ。

(function($) {
var sR = {
    defaults: {
        slideSpeed: 400,
        easing: false,
        callback: false     
    },
    thisCallArgs: {
        slideSpeed: 400,
        easing: false,
        callback: false
    },
    methods: {
        up: function (arg1,arg2,arg3) {
            if(typeof arg1 == 'object') {
                for(p in arg1) {
                    sR.thisCallArgs.eval(p) = arg1[p];
                }
            }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                sR.thisCallArgs.slideSpeed = arg1;
            }else{
                sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
            }

            if(typeof arg2 == 'string'){
                sR.thisCallArgs.easing = arg2;
            }else if(typeof arg2 == 'function'){
                sR.thisCallArgs.callback = arg2;
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
            var $cells = $(this).find('td');
            $cells.wrapInner('<div class="slideRowUp" />');
            var currentPadding = $cells.css('padding');
            $cellContentWrappers = $(this).find('.slideRowUp');
            $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
                                                                                                                paddingTop: '0px',
                                                                                                                paddingBottom: '0px'},{
                                                                                                                complete: function () {
                                                                                                                    $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
                                                                                                                    $(this).parent().css({'display':'none'});
                                                                                                                    $(this).css({'padding': currentPadding});
                                                                                                                }});
            var wait = setInterval(function () {
                if($cellContentWrappers.is(':animated') === false) {
                    clearInterval(wait);
                    if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
                }
            }, 100);                                                                                                    
            return $(this);
        },
        down: function (arg1,arg2,arg3) {
            if(typeof arg1 == 'object') {
                for(p in arg1) {
                    sR.thisCallArgs.eval(p) = arg1[p];
                }
            }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                sR.thisCallArgs.slideSpeed = arg1;
            }else{
                sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
            }

            if(typeof arg2 == 'string'){
                sR.thisCallArgs.easing = arg2;
            }else if(typeof arg2 == 'function'){
                sR.thisCallArgs.callback = arg2;
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
            var $cells = $(this).find('td');
            $cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
            $cellContentWrappers = $cells.find('.slideRowDown');
            $(this).show();
            $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });

            var wait = setInterval(function () {
                if($cellContentWrappers.is(':animated') === false) {
                    clearInterval(wait);
                    if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
                }
            }, 100);
            return $(this);
        }
    }
};

$.fn.slideRow = function(method,arg1,arg2,arg3) {
    if(typeof method != 'undefined') {
        if(sR.methods[method]) {
            return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
        }
    }
};
})(jQuery);

■使い方

普通

$('#row_id').slideRow('down');
$('#row_id').slideRow('up');

応用

$('#row_id').slideRow('down', 500); //スライドスピード
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // スライドスピードとコールバック関数
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); // スライドスピード、イージングオプション、コールバック関数
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); // オプションをオブジェクトで渡すことも可能

これは痒いところに手が届いた神プラグイン。

 

【jQuery】テーブルの最後の要素に行を挿入する。

めも。

例えば下記のようなテーブルがあったとして。

<table id="table">
  <tbody>
    <tr>aaa</tr>
    <tr>bbb</tr>
    <tr>ccc</tr>
  </tbody>
</table>

スクリプトは下記の通り。

$('#table tr:last').after('<tr>ddd</tr><tr>eee</tr>');

 

【jQuery】each()メソッドはキーを受け取れる。

という発見。

$('div').each(function(k) {
    k // これがキーになる
});

いままで自前でインクリメントしてたけど、これは便利。

 

【jQuery】jQueryのeach()メソッドでcontinue, breakする。

めも。

$('hoge').each(function(i) {
    if(i == 5) {
        return true; // continue
    }
    if(i == 15) {
        return false; // break;
    }
});

returnの値で制御することが可能。

 

【jQuery】prototypeJSとjQueryを共存させる方法。

めも。

jQueryをprototypeよりも後に読み込み、直後にnoConflict()メソッドを呼び出せばOK

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
</script>

これで$はprototypeJSの挙動になる、
jQueryの$メソッドを用いたければjQuery()と明記してやれば良い。