
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.