웹개발 매거진 2.0 -

Obaid Ahmed 는 Prototype과 Script.aculo.us로 구현한 Coverflow를 공개하였습니다.

<div id="protoflow">

        <img src="imgs/DSCN0940_91360.jpg"/>

        <img src="imgs/stimme_von_oben_187192.jpg"/>

        <img src="imgs/Tropfen_1_Kopie_201721.jpg"/>

        <img src="imgs/farbraum_012_147508.jpg"/>

        <img src="imgs/IMG_4906_199357.jpg"/>

        <img src="imgs/Tropfen_1_Kopie_201721.jpg"/>

        <img src="imgs/Fries_201253.jpg"/>

        <img src="imgs/Fries_201253.jpg"/>

</div>

<ul id="protoCaptions" class="protoCaptions">

        <li>Caption 1</li>

        <li>Caption 2</li>

        <li>Caption 3</li>

        <li>Caption 4</li>

        <li>Caption 5</li>

        <li>Caption 6</li>

        <li>Caption 7</li>

        <li>Caption 8</li>

</ul>

가볍게 정의한 뒤

Event.observe(window, 'load', function() { 

  cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'});

});

설정해주면 끝입니다.

데모는 http://www.deensoft.com/lab/protoflow 에서 확인하실수 있고 다운로드는 이곳입니다.

(0)

(0)

훌륭한 자바스크립트 라이브러리인 Prototype.js 잘 사용하고 계신가요?

http://thinkweb2.com 에서는 두번에 걸쳐 Prototype.js의 올바른 사용법에 대해서 포스팅 한 적이 있습니다.
소개 된지 좀 되었지만 몇가지는 계속 까먹게 되는군요

1편
http://thinkweb2.com/projects/prototype-checklist/

2편
http://thinkweb2.com/projects/prototype/2007/08/12/how-well-do-you-know-prototype-part-ii/

간단하게 소개 하면 다음과 같습니다.

1. document.getElementById('foo') 대신 $('foo') 를 사용 할 것

2. var woot = $('bar').value 대신 var woot = $F('bar') 를 사용 할 것

3.
$('footer').style.height = '100px';
$('footer').style.background = '#ffc';

대신

$('footer').setStyle({
height: '100px',
background: '#ffc'
})

를 사용 할 것

4.
$('coolestWidgetEver').innerHTML = 'some nifty content'

대신

$('coolestWidgetEver').update('some nifty content') 를 사용 할 것

5.
new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')

대신

new Ajax.Request('ninja.php', {
parameters: {
weapon1: 'foo',
weapon2: 'bar'
}
})

를 사용 할 것

6.

new Ajax.Request('blah.php', {
method: 'POST',
asynchronous: true,
contentType: 'application/x-www-form-urlencoded',
encoding: 'UTF-8',
})

대신

new Ajax.Request('blah.php')

사용 할 것

7.
Event.observe('myContainer', 'click', doSomeMagic)

대신

$('myContainer').observe('click', doSomeMagic)

사용 할 것

8.

$$('div.hidden').each(function(el){
el.show();
})

대신

$$('div.hidden').invoke('show')

(0)