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.