Rev. 2.73

자바스크립트 이펙트의 대명사 스크립타큘러스(Scriptaculous)는 1.7 베타에 추가되는 모프(Morph)와 트랜스폼(Transform) 이펙트의 데모를 시연했습니다. 현재 테스트 파일이 정식으로 배포된 상태는 아니지만 테스트 소스를 추출하여 사용해 보았습니다. Prototype 1.5.0의 RC2가 베이스로 사용되고 있더군요. 트랜스폼 이펙트는 List Item 에서 특정 메시지를 부각시키는 역할을 합니다. 그리고 모프 이펙트는 아래에서 직접 체험해 봅시다.

Effect.Morph

// Usage : Element morph
new Effect.Morph('error_message',{
style:'background:#f00; color:#fff; border: 20px solid #f88; font-size:2em',
duration:0.8
});

// same thing with Element morph is
$('error_message').morph(
'background:#f00; color:#fff; border: 20px solid #f88; font-size:2em',
{duration:0.8}
);

Usage를 보면, 스타일시트의 코드 자체가 스트링으로 입력받는 모습이 독특합니다. { background: '#f00', fontSize: '2em' } 요딴 식으로 작성하기가 무척 불편했었는데 말이죠. 아무튼 멋집니다.

Comments

Monnerjahn씨는 마우스의 휠을 Prototype의 Event.observe로 확장코드를 개발하고 공개했습니다. 좌측의 사각형 엘리먼트에 마우스를 올리고 휠을 사용해 보세요.(마우스 오버하는 순간 스크롤바가 비활성화 됩니다.) 이 이벤트를 사용하여 구글맵의 줌인/줌아웃처럼 페이지 스크롤 자체를 자바스크립트로 컨트롤 할 수 있게 되었습니다. 멋진 그림이 그려지지 않으세요?

/*
* Orginal: adomas.org/javascript-mouse-wheel/
* prototype extension by "Frank Monnerjahn" themonnie@gmail.com
*/
Object.extend(event, {
    wheel:function (event){
        var delta = 0;
        if (!event) event = window.event;
        if (event.wheelDelta) {
            delta = event.wheelDelta/120;
            if (window.opera) delta = -delta;
        } else if (event.detail) { delta = -event.detail/3; }
        return Math.round(delta); //Safari Round
    }
});

/*
* end of extension
*/

var counterSite=0;
function handleSite(e) {
    counterSite +=  event.wheel(e);
    $('delta').innerHTML = counterSite +'#'+ event.wheel(e) +
    ": " + (event.wheel(e) <0 ? 'down' : 'up' );
}

var counterDIV=0;
function handleDIV(e) {
    counterDIV +=   event.wheel(e);
    $('divdelta').innerHTML = counterDIV +'#'+ event.wheel(e) +
     ": " + (event.wheel(e) <0 ? 'down' : 'up' );
}

event.observe(document, "mousewheel", handleSite, false);
event.observe(document, "DOMMouseScroll", handleSite, false); // FF

event.observe($('divdelta'), "mousewheel", handleDIV, false);
event.observe($('divdelta'), "DOMMouseScroll", handleDIV, false); // FF

덧. 실습예제가 업데이트 되었습니다.(IE6,7에서 스크롤 막기, 움직이는 엘리먼트)

Comments

스크립타큘러스가 1.6.5를 발표했습니다. 자세한 변동사항은 아래와 같습니다. Prototype 1.5.0 RC1도 변경이 있는듯 합니다.

* Update to Prototype 1.5.0_rc1 revision [5462]
* Support the HTML 'for' attribute in Builder by using 'htmlFor', fixes #6472 [gjones, tdd]
var node = Builder.node('label', { htmlFor: 'myinput' });
* Add support to run a specific failing unit test by clicking on the corresponding test result, fixes #6290 [leeo]
* Add modifier key support to Event.simulateMouse, fixes #6391 [savetheclocktower]
* Add rails-trunk update task, clean up references to MIT license
* Add new 'with-last' queue position option to queue effects to occur in parallel with the last effect to start in the queue
* Add new special core effect Effect.Event for one-shot events that follow timelines defined by effect queues
new Effect.Event({ afterFinish:function(){
// do some code here
}, position: 'end' });
* Do some refactoring to make use of Prototype 1.5 functionalities and save LOC
* Fix an possible crash of IE on Effect.SlideUp, fixes #3192 [thx nel]
* Add Builder.build() to create nodes from strings containing HTML, [DHH]
var node = Builder.build("<p>this is <b>neat!</b></p>");
* Add a pulses parameter to Effect.Pulsate to control the amount of pulses, fixes #6245 [leeo]
For example, Effect.Pulsate('d8', {pulses: 2}) would pulsate twice. If the option is not given, it defaults to five pulses.
* Fix an issue with clicking on a slider span resulting in an exception, fixes #4707 [thx sergeykojin]
* Fix an issue with Draggables when no options are supplied, fixes #6045 [thx tdd]

Comments