11 września, 2013 
Dominik-W 
Przedstawiamy 2. cześć kursu na temat biblioteki script.aculo.us. Dziś jej najmocniejsza strona – efekty wizualne.
Poznajmy kolejne możliwości biblioteki script.aculo.us
Efekty wizualne
Efekty mają swoje własne opcje, jednak wszędzie możemy użyć Core Effect properties.
Ogólna postać:
new Effect.EffectName(element, required-params, [options]);
Zobaczmy jak to wygląda w praktyce.
Przykład – użycie efektów:
<div id="morph_demo" style="background: #ccc; width: 100px; height: 100px;"></div>
<ul>
<li>
<a href="#" onclick="$('morph_demo').morph('background: #00ff00; width: 300px;'); return false;">
Kliknij
</a>
</li>
<li>
<a href="#" onclick="$('morph_demo').morph('background: #cccccc; width: 100px;'); return false;">
Resetuj
</a>
</li>
</ul>
Przykład 2 – określanie parametrów efektu:
HTML
<div id="nasz_div" style="background: #eee; width: 100px; height: 100px; border: solid 2px red;"></div>
JavaScript
new Effect.Opacity('nasz_div', {
duration: 2.0,
transition: Effect.Transitions.linear,
from: 1.0,
to: 0.2
});
Powyższy kod definiuje efekt zmiany przeźroczystości elementu nasz_div.
Wspólne funkcje callback
Są to:
– beforeStart()
– beforeSetup()
– afterSetup()
– beforeUpdate()
– afterUpdate()
– afterFinish()
Efekty: właściwości i metody
Dla instancji obiektów typu Effect, istnieje wiele użytecznych właściwości i metod, jak:
– effect.element – element, do którego stosuje się efekt
– effect.options – zawiera opcje zdefiniowane dla efektu
– effect.currentFrame – numer ostatniej wy-renderowanej ramki
– effect.startOn, effect.finishOn – określają czasy (w ms) kiedy efekt zostanie rozpoczęty / zatrzymany
– effect.effects[] – tablica zawierająca definicje indywidualnych efektów (dla Effect.Parallel)
– effect.cancel() – zatrzymuje efekt
– effect.inspect() – zwraca podstawowe informacje na temat instancji (debug)
Przykład – prosta animacja:
new Effect.Move(this, {
x: 200,
transition: Effect.Transitions.spring
});
Kolejki efektów (effect queues)
Jest to znakomita możliwość oferowana przez bibliotekę, pozwalająca nam kolejkować i wykonać wiele efektów jako sekwencję.
Przykład – kolejki efektów:
new Effect.SlideDown('test1');
new Effect.SlideUp('test1', { queue: 'end' });
// 2
new Effect.SlideUp('test1', { queue: 'end' });
new Effect.SlideDown('test1', { queue: 'front' });
// 3
new Effect.SlideUp('menu', { queue: { position: 'end',
scope: 'menuxscope' } });
new Effect.SlideUp('bannerbig', { queue: { position: 'end',
scope: 'bannerscope' } });
new Effect.SlideDown('menu', { queue: { position: 'end',
scope: 'menuxscope' } });
Efekty w przykładach
Przykład – zasięg / scope:
var queue = Effect.Queues.get('myscope');
var queue = Effect.Queues.get('myscope');
queue.each(function(effect) { effect.cancel(); });
Effect.Queues.get('myscope').interval = 100;
Przykład – Effect.Appear – pokaż element (z efektem):
$('id_of_element').appear();
// lub $('id_of_element').appear({ duration: 3.0 });
// Effect.Appear('id_of_element', { duration: 3.0 });
Element pojawi się, z ewentualnie zdefiniowanym efektem.
Opcje:
duration (default 1.0), from (default 0.0), to (1.0)
Kolejne metody (Blind-) powodując pojawienie się (ew. zniknięcie) elementu, z animacją zwijania / rozwijania w określonym kierunku.
Przykład Effect.BlindDown
Effect.BlindDown('id_of_element', { duration: 3.0 });
Opcje:
scaleX, scaleY, scaleContent, scaleFromCenter, scaleMode, scaleFrom, scaleTo, duration.
Effect.BlindRight
Effect.BlindRight(‚id_elementu’);
Przykład praktyczny – blind right:
Effect.BlindRight = function(element) {
element = $(element);
var elementDimensions = element.getDimensions();
return new Effect.Scale(element, 100, Object.extend({
scaleContent: false,
scaleY: false,
scaleFrom: 0,
scaleMode: {
originalHeight: elementDimensions.height,
originalWidth: elementDimensions.width},
restoreAfterFinish: true,
afterSetup: function(effect) {
effect.element.makeClipping().setStyle({
width: '0px',
height: effect.dims[0] + 'px'
}).show();
},
afterFinishInternal: function(effect) {
effect.element.undoClipping();
}
}, arguments[1] || { }));
};
Przykład – Effect.BlindUp:
Effect.BlindLeft = function(element) {
element = $(element);
element.makeClipping();
return new Effect.Scale(element, 0,
Object.extend({ scaleContent: false,
scaleY: false,
scaleMode: 'box',
scaleContent: false,
restoreAfterFinish: true,
afterSetup: function(effect) {
effect.element.makeClipping().setStyle({
height: effect.dims[0] + 'px'
}).show();
},
afterFinishInternal: function(effect) {
effect.element.hide().undoClipping();
}
}, arguments[1] || { })
);
};
Effect.DropOut
Effect.DropOut('id_of_element');
// Effect.DropOut – element opacity
$(‚id_of_element’).fade({ duration: 3.0, from: 0, to: 1 });
Opcje:
duration, form, to
Effect.Fold – „złóż” element
Effect.Fold('id_of_element');
Effect.Grow – „rosnący” element
Effect.Grow(‚id_of_element’);
Opcje:
direction (default = ‚center’, inne: ‚top-left’, ‚top-right’, ‚bottom-left’, ‚bottom-right’), duration
Effect.Highlight – podświetl
new Effect.Highlight('id_of_element', [options]);
Opcje:
startcolor – kolor początkowy; domyślny #ffff99
endcolor – kolor końcowy; #ffffff
restorecolor – kolo tła elementu już po wywołaniu efektu
Przykład użycia efektu podświetlenia:
<p id="highlight_demo" style="padding:10px; border:1px solid #ccc; background:#ffffff;">
Demo. Click!<br />
<a href="#" onclick="new Effect.Highlight(this.parentNode, { startcolor: '#ffff99', endcolor: '#ffffff' }); return false;"> Highlight me! </a>
</p>
Effect.Morph – zmiana właściwości CSS elementu (aculo v. 1.7+)
Przykład:
new Effect.Morph('error_message', {
style: 'background:#f00; color: #fff;', // CSS
duration: 0.8 // Core Effect properties
});
Effect.Move – przenoszenie elementu:
new Effect.Move('object', { x: 0, y: 0, mode: 'absolute' });
Opcje:
x, y, mode (absolute, relative)
Effect.Puff – efekt ‚wybuchu’
Effect.Puff('id_of_element', { duration: 3 });
Opcje:
duration, from, to
Przykładowo:
<div id="puffd" style="width: 80px; height: 80px; background: #c2defb; border: 1px solid #333;"></div>
<ul>
<li>
<a href="#" onclick="new Effect.Puff('puffd'); return false;">Click</a>
</li>
<li>
<a href="#" onclick="$('puffd').setStyle({ display: 'block', opacity: 1, width: '80px', height: '80px' }); return false;">Reset</a>
</li>
</ul>
Effect.Pulsate – pulsowanie:
Effect.Pulsate('id_of_element', { pulses: 5, duration: 1.5 });
Opcje:
duration, from, pulses
Przykładowo:
<div id="pulsate_demo" style="width: 150px; height: 40px; background: #ccc; text-align: center;">
<a href="#" onclick="Effect.Pulsate('pulsate_demo'); return false;" style="line-height: 40px;">Click!</a>
</div>
Effect.Scale – skalowanie:
new Effect.Scale(element, percent, [options]);
Przykład:
<a href='#' onclick="new Effect.Scale(this.parentNode, 200);
return false;">Click</a>
Effect.ScrollTo – miły dla oka efekt przewijania strony w określone miejsce
Effect.ScrollTo('id_of_element');
Opcje:
duration, offset (px)
Przykład:
<p><a name="article_top" id="article_top"></a></p>
...
<a href="#" onclick="Effect.ScrollTo('article_top');
return false;">Click </a>
Effect.Shake – potrząsanie:
Effect.Shake('id_of_element');
Opcje:
duration, distance
Przykład:
<div id="shake_demo" style="width:150px; height:40px; background: #ccc; text-align: center;>
<a href="#" onclick="new Effect.Shake('shake_demo'); return false;" style="line-height: 40px;">Click </a>
</div>
Effect.Shrink – kurczenie się elementu:
Effect.Shrink('id_of_element');
Opcje:
direction, duration
Effect.SlideDown – rozwiń:
Effect.SlideDown('id_of_element', { duration: 3.0 });
Effect.SlideUp – zwiń:
Effect.Squish – zanikanie w lewo i w górę:
Effect.Squish('id_of_element');
Effect.SwitchOff – efekt „wyłączenia”:
Effect.SwitchOff('id_of_element');
Komponent Slider – suwak
Przyjazna dla programisty implementacja komponentu GUI: suwaka.
Konstruktor:
new Control.Slider('handles','track', [options]);
Przykład:
div.slider { width: 256px; margin: 10px 0; background-color: #ccc; height: 10px; position: relative; }
div.slider div.handle { width: 10px; height: 15px; background-color: #f00; cursor: move; position: absolute; }
div#zoom_element { width: 50px; height: 50px; background: #2d86bd; position:relative; }
HTML <div> Use the slider to resize the box <div id="zoom_slider"> <div></div> </div> <p>And this to change its color</p> <div id="rgb_slider"> <div style="background-color: #f00;"></div> <div style="background-color: #0f0;"></div> <div style="background-color: #00f;"></div> </div> <div id="zoom_element"></div> </div>
JavaScript
(function() {
var zoom_slider = $('zoom_slider'),
rgb_slider = $('rgb_slider'),
box = $('zoom_element');
new Control.Slider(zoom_slider.down('.handle'), zoom_slider,
{
range: $R(40, 160),
sliderValue: 50,
onSlide: function(value) {
box.setStyle({
width: value + 'px', height: value + 'px'
});
},
onChange: function(value) {
box.setStyle({
width: value + 'px', height: value + 'px'
});
}
});
new Control.Slider(rgb_slider.select('.handle'), rgb_slider,
{
range: $R(0, 255),
sliderValue: [45, 134, 189],
onSlide: function(values) {
box.setStyle({ backgroundColor: "rgb("+
values.map(Math.round).join(',') +")" });
},
onChange: function(values) {
box.setStyle({ backgroundColor: "rgb("+ values.
map(Math.round).join(',') +")" });
}
});
})();
Przykład końcowy – prosty widget:
var Widget = Class.create({
initialize: function(element, options) {
this.element = $(element);
// fire an event and pass this instance as a property
// of the event object
this.element.fire("widget:created", { widget: this });
}
});
// using the custom event
$('some_element').observe('widget:created', function() {
console.log("widget created");
});
// or observe document-wide:
document.observe("widget:created", function() {
console.log("widget created");
});
var someWidget = new Widget('some_element');
Podsumowanie
Jak mieliśmy okazję się przekonać, ta świetna biblioteka pozwala nam tworzyć znakomite efekty dość niedużym nakładem kodu. Ogranicza nas wyobraźnia, i czasami znajomość detali, ktore jednak można szybko znaleźć w oficjalnej dokumentacji.
Opublikowano w 
Tags: 
