http://www.napyfab.com/ajax-indicators/ 에서 제공하는 AJAX Activity Indicators 이미지들입니다. Prototype의 Ajax.Request 또는 Ajax.Updater 객체를 사용할 때 onLoading, onComplete 옵션으로 로딩 알리미를 사용할 수 있습니다.
원하는 모션을 직접 만들어 쓰자!
지금부터 소개하는 것은 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] || {}));
}
// 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);
}
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});
}
Comments