Rev. 2.73

AJAX 활동 알리미(Activity Indicators)

http://www.napyfab.com/ajax-indicators/ 에서 제공하는 AJAX Activity Indicators 이미지들입니다. Prototype의 Ajax.Request 또는 Ajax.Updater 객체를 사용할 때 onLoading, onComplete 옵션으로 로딩 알리미를 사용할 수 있습니다.

new Ajax.Updater('items', 'ajax/cart.php', {
onLoading:function(request){Element.show('indicator')},
onComplete:function(request){Element.hide('indicator')},
parameters:'action=add' + encodeURIComponent(element.id),
evalScripts:true, asynchronous:true
}

덧. 온라인에서 즉성 생성 : http://www.ajaxload.info/

Comments

Scriptaculous Visual Effects 고급 - 응용

원하는 모션을 직접 만들어 쓰자!
지금부터 소개하는 것은 script.aculo.us에 있는 보물상자(?)의 내용입니다. 이것은 여러 사용자들이 응용한 모션 이펙트의 집합입니다. 그 중에는 매우 훌륭한 것들도 많이 있습니다. 마치 Combination Effects인냥 활용 가능한 효과와 옵션까지도 만들어냅니다.

Pop Out?, Drop Elements In

Effect.PopOut = function(element) {
element = $(element);
var oldTop = element.style.top;
var oldLeft = element.style.left;
var pos = Position.cumulativeOffset(element);
return new Effect.Parallel(
[ new Effect.MoveBy(element, -100, 0, { sync: true }),
new Effect.Opacity(element, { sync: true, from:1, to: 0 }) ],
Object.extend(
{ duration: 0.5,
beforeSetup: function(effect) {
Element.makePositioned(effect.effects[0].element);
Element.setOpacity(element, 1);
element.style.position = 'relative';
// element.style.top = (pos[1]-100) + 'px';
}
}, arguments[1] || {}));
}
Effect.DropIn = function(element) {
element = $(element);
var oldTop = element.style.top;
var oldLeft = element.style.left;
var pos = Position.cumulativeOffset(element);
return new Effect.Parallel(
[ new Effect.MoveBy(element, 100, 0, { sync: true }),
new Effect.Opacity(element, { sync: true, from:0.0, to: 1.0 }) ],
Object.extend(
{ duration: 0.5,
beforeSetup: function(effect) {
Element.makePositioned(effect.effects[0].element);
Element.setOpacity(element, 0);
element.style.position = 'absolute';
element.style.top = (pos[1]-100) + 'px';
}
}, arguments[1] || {}));
}

by buggedcom, [Effect.PopOut] [Effect.DropIn]

Vertical Shake

Effect.ShakeVertical = function(element) {
element = $(element);
var oldStyle = {
top: Element.getStyle(element, 'top'),
left: Element.getStyle(element, 'left') };
return new Effect.Move(element,
{ x: 0, y: 20, duration: 0.05, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ x: 0, y: -40, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ x: 0, y: 40, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ x: 0, y: -40, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ x: 0, y: 40, duration: 0.1, afterFinishInternal: function(effect) {
new Effect.Move(effect.element,
{ x: 0, y: -20, duration: 0.05, afterFinishInternal: function(effect) { with(Element) {
undoPositioned(effect.element);
setStyle(effect.element, oldStyle);
}}}) }}) }}) }}) }}) }});
}

by buggedcom, [Effect.ShakeVertical]
Effect.Shake의 세로버전?

Slide up or down with the same button

// Prototype 1.3.1 or earlier
Effect.SlideUpAndDown = function(element) {
element = $(element);
if(element.style.display != 'none') new Effect.SlideUp(element);
else new Effect.SlideDown(element);
}
// Prototype 1.4.0 or later
Effect.SlideUpAndDown = function(element) {
element = $(element);
if(Element.visible(element)) new Effect.SlideUp(element);
else new Effect.SlideDown(element);
}

[Effect.SlideUpAndDown]
Effect.togle('slide', 'element')를 구현한 것.

Phase Elements smoothly

Effect.PhaseIn = function(element) {
element = $(element);
new Effect.BlindDown(element, arguments[1] || {});
new Effect.Appear(element, arguments[2] || arguments[1] || {});
}
Effect.PhaseOut = function(element) {
element = $(element);
new Effect.Fade(element, arguments[1] || {});
new Effect.BlindUp(element, arguments[2] || arguments[1] || {});
}
Effect.Phase = function(element) {
element = $(element);
if (element.style.display == 'none')
new Effect.PhaseIn(element, arguments[1] || {}, arguments[2] || arguments[1] || {});
else new Effect.PhaseOut(element, arguments[1] || {}, arguments[2] || arguments[1] || {});
}

by jake richardson {jaecob.gmail.com}, [Effect.PhaseIn] [PhaseOut] [Phase]
Effect.Blid에 Fade와 Appear과 동시에 진행하는 효과

Effect.Transitions.exponential and Effect.Transitions.slowstop

MoveBy Test
sinoidal(default) left ~ sinoidal(default) right
linear left ~ linear right
exponential left ~ exponential right
slowstop left ~ slowstop right

Effect.Transitions.exponential = function(pos) {
return 1-Math.pow(1-pos,2);
}
Effect.Transitions.slowstop = function(pos) {
return 1-Math.pow(0.5,20*pos);
}

Transitions에 옵션을 추가한다.(매우 쓸만함)

Center Divs
아래의 링크처럼 처럼 effecs.js를 수정하고 응용한다.
http://www.icefuzion.net/area51/new_site/test_templates/javascript/src/effects.js

function test(){
Effect.Center('loadertag');
Effect.Appear('loadertag');
var ret = function(t) {
Effect.Puff('loadertag');
var dyn = document.getElementById('dyncontent');
dyn.innerHTML = t.responseText;
}
var errFunc = function(t){
alert('error');
}
new Ajax.Request('mobo.txt', {method:'get', onSuccess:ret, onFailure:errFunc});
}

Center Divs Test
element를 중앙으로 이동하고 특정 문서를 로딩한다.(불완전함)

※ 이 페이지는 RSS리더기에서 비정상으로 보일 수 있으며 정상적으로 작동하지 않습니다.

Comments