prototype.jsにはDOMを操作する為のメソッドが多数追加されているが

document.insert(Element);

は簡単なメソッドでこの場合は'document'内に'Element'を追加する。
他にも

CIMG1023 CIMG1312 CIMG1397 CIMG2167 CIMG2393 CIMG2683 CIMG3128 CIMG3141 DSCF0002 DSCF0004 DSCF0006 DSCF0010 DSCF0011 DSCF0031 DSCF0039 IMG_0013 IMG_0045 IMG_0051 IMG_0086 IMG_0116 IMG_0148 IMG_0152 IMG_0153 IMG_0230 IMG_0440
$('content').insert(new Element('div'));

こんな書き方も出来る。
あと、例えば以下のようなドキュメントがあったとして

<div id="wrapper">
<div class="move">1</div>
<div class="move">2</div>
<div class="move">3</div>
<div class="move">4</div>
<div class="move">5</div>
</div>

これに対して

$('wrapper').insert($$('.move')[0])

こうしてやると状態が書き変わって

<div id="wrapper">
<div class="move">2</div>
<div class="move">3</div>
<div class="move">4</div>
<div class="move">5</div>
<div class="move">1</div>
</div>

と、こんな状態になる。
一番上にあったDIVが最後になっている。 これは、insertメソッドのデフォルトの動作が基準になる要素(コンテナになる要素、この場合は'wrapper')の末尾に追加する仕様だからだ。他にも先頭にしたりコンテナ要素の前にしたり後ろにしたり出来る。
しかも上の例では元々あったオブジェクトを再追加している。
実際FireBugやsafariのWebインスペクタを使って上の

$('wrapper').insert($$('.move')[0])

を呼び出すだけでリアルタイムで確認が出来る。
そして、もちろんDIV以外の要素(例えば写真等)に対しても呼び出せるのでタイマーオブジェクトの中で上のメソッドを呼び出すだけで写真の並びを循環させる事が出来る
以下のコードは、まず数枚の写真をページ内の中央に楕円上に整列させ1秒ごとにメソッドを呼び出し、先頭にあった写真を最後尾に持ってってる
下にある'click'をクリックすると実際の動作が確認できる。

document.observe('dom:loaded', function(event) {
    $('click').observe('click', function(event) {
        event.stop();
        event.element().stopObserving();
        event.element().setStyle({
            cursor: 'default',
            'text-decoration': 'none'
        });
        var elems = $$('img');
        var centerX = document.viewport.getWidth() / 2;
        var centerY = (document.viewport.getHeight() / 2) + document.viewport.getScrollOffsets()[1];
        var screenZ = 100;
        var centerZ = 300;
        var radius = 200;
        var angle = 0;
        var interval = Math.PI * 2 / elems.length;
        var srcWidth = parseInt(elems[0].getStyle('width'));
        var srcHeight = parseInt(elems[0].getStyle('height'));
        var zIndex = 0;
        
        var f = function() {
            elems = $$('img');
            for (var i = 0; i < elems.length; i++) {
                if (i < elems.length / 2) zIndex--;
                
                var x = centerX + radius / 4 * Math.cos(angle);
                var y = centerY - radius * Math.sin(angle);
                var z = centerZ - radius * Math.cos(angle);
                var depth = screenZ / z;
                var width = srcWidth * depth;
                var height = srcHeight * depth;
                elems[i].setStyle({
                    'top': (y - (height / 2)) + 'px',
                    'left': (x - (width / 2)) + 'px',
                    'width': width + 'px',
                    'height': height + 'px',
                    'zIndex': zIndex
                });
                angle += interval;
            }
        }
        var timeId = setInterval(function() {
            f();
            elems[0].up().insert(elems[0]);
        },1000);
    });
});

click

実際のページ制作でこれを使う事はまあ、ないだろうが。
ちなみにJQueryではinsertではなくappendだ

カテゴリ:

トラックバック(0)

トラックバックURL: http://blog.beanz-net.jp/beanz_mtos/mt-tb.cgi/75

コメントする