Erhan is typing…

WebDevelopment , PHP, Javascript, CakePHP, ExtJS

script.aculo.us Efektleri

| Comments

Geçen yazımızda başladığımız script.aculo.us serüvenine bıraktığımız yerden devam ediyoruz. Bu hafta kütüphanenin efektler bölümünü ele alacağız ve temel efektlerden birer örnek yapmaya çalışacağız.

script.aculo.us kütüphanesinin efektleri, sürükle-bırak, sıralama, otomatik tamamlama gibi işlerinizi kolaylaştıracak kontrolleri ve DOM öğelerini üretebilen özellikleri barındırdığından bahsetmiştik. Bu ay efekt kullanımına değineceğiz. Geçen ayki yazıya ulaşamayanlar pctech.com.tr adresini ziyaret edebilirler.

Geçen ay da değindiğimiz bir iki şeyin üzerinden yine geçelim. Efekt kullanımından standart söz dizimi

1

new Effect.EffektAdi(element_id, gerekli-parametreler [, secenekler]);

şeklindedir. Her efekt için gerekli parametre olmayabilir. İleride efektlere tek tek değinirken kullanılıp kullanılmadığına da yer vereceğiz. Seçenekler de genel veya sadece efekte bağlı olabilir.

Seçenekler bölümünde tüm efektler için ortak parametreler şu şekildedir:

İsim Açıklama
duration Efektin saniye cinsinden uygulanma süresi (Varsayılan: 1.0)
fps Efekti bir film gibi düşünün. İşte bu ayar efektin saniye başına kaç kare olacağını belirler. Varsayılan 25. En fazla 100 olabilir. 25’in üstünü zaten insan gözü algılamaz ;)
transition Geçişin nasıl olacağınız belirler. Kullanılabilecek değerler: Effect.Transitions.sinoidal (varsayılan), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble ve Effect.Transitions.flicker.
from Geçişin (transition) başlangıç noktasını belirler. 0.0 ve 1.0 arasında bir değer olabilir (Varsayılan: 0.0).
to Geçişin bitiş noktasını belirler. 0.0 ve 1.0 arasında bir değer olabilir (Varsayılan: 0.0).
sync Efektin kareleri otomatik olarak gösterip göstermeyeceğini belirler. True değeri verildiğinde efektin render() metodu çağırılarak kareler kontrol edilebilir. Paralel efektinde kullanılır.
queue Efektin hangi sırada olacağını belirler. Kullanımına daha sonra değineceğiz.
direction Geçişin yönünü belirler. top-left, top-right, bottom-left, bottom-right veya center (varsayılan) değerlerini alabilir ve sadece Grow ve Shrink efektlerinde kullanılabilir.

Bunlar dışında seçenekler içerisine parametre olarak kendi fonksiyonlarınızı da dahil edebilirsiniz. Böylece efekt çalıştırılmaya devam ederken belirtilen olaylara bağlı olarak sizin fonksiyonunuz da çalıştırılır. Efekt nesnesi fonksiyonunuza parametre olarak geçirilir. Bu sayede efekt nesnesine de erişerek kendi fonksiyonunuzda kullanabilirsiniz. Kullanabileceğiniz olaylar şunlardır:

İsim Açıklama
beforeStart Belirtilen fonksiyon efekt gösteriminin döngüsü başlamadan önce çağırılır.
beforeUpdate Gösterim döngüsünün her bir tekrarında, değişim gerçekleşmeden önce çağırılır.
afterUpdate Gösterim döngüsünün her bir tekrarında, değişim gerçekleştekten sonra çağırılır.
afterFinish Efekt gösteriminin döngüsü bittikten sonra çağırılır.

Kuru kuru bunların ne anlama geldiğini kavramada sorun olabilir o yüzden örneklere geçmeden bir kod örneği verelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function baslamadanOnce(sayfaOgesi) {
    alert('Efektin uygulandığı sayfa elemanının id değeri: ' + sayfaOgesi.element.id)
}

function bittiktenSonra(sayfaOgesi) {
    alert('Efektin uygulandığı sayfa elemanı: ' + sayfaOgesi.element)
}

new Effect.Highlight(oge, {
    startcolor: '#ffffff',
    endcolor: '#ffffcc',
    duration: 0.5,
    beforeStart: baslamadanOnce,
    afterFinish: bittiktenSonra
});

Fonksiyonunuza parametre olarak geçirdiğiniz efekt nesnesinin erişebileceğiniz tüm özellikleri de şu şekilde:

İsim Açıklama
effect.element Efektin uygulandığı sayfa öğesi.
effect.options Efekte ait seçenekler.
effect.currentFrame Gösterilen son karenin numarası.
effect.startOn Efektin başlatıldığı zamanın milisaniye cinsinden değeri.
effect.finishOn Efektin bitirildiği zamanın milisaniye cinsinden değeri.
effect.effects[] Parallel efektinde her bir alt efektin tutulduğu bir effects[] dizisi bulunur. Her bir alt efekte bu dizi içerisinden erişilebilir.

Efektler

script.aculo.us kütüphanesi 5 esas efekte sahiptir. Bir de bunların üzerine kurulu çeşitli birleşim efektleri vardır. Bu sayımızda temel efektleri ele alacağız.

Effect.Opacity

Sayfa öğesinin saydamlığını değiştirir.

Genel söz dizimi
1
2

new Effekt.Opacity('element_id' [, secenekler]);
new Effekt.Opacity(element [, secenekler]);
Örnek
1
2
3

<div onclick="new Effekt.Opacity(this, {duration: 2.0, from: 1.0, to: 0.0});">
    Dikkat! Tıklarsanız kaybolur
</div>

Öğeye tıklandığında 2 saniye içerisinde (duration: 2.0) saydamlık %100’den (from: 1.0) %0’a (to:0.0) düşecek, yani kaybolacak.

Effect.Scale

Sayfa öğesinin boyutlarını değiştirir. En ve boy ‘em’ birimine göre değiştirilir.

Genel söz dizimi
1
2

new Effekt.Scale('element_id', yüzde [, secenekler]);
new Effekt.Scale(element, yüzde [, secenekler]);

Efekte özel seçenekler

İsim Varsayılan Açıklama
scaleX true Yatay olarak boyutlandırma
scaleY true Dikey olarak boyutlandırma
scaleContent true İçeriğin de boyutlandırılması
scaleFromCenter false Öğenin merkez koordinatlarının sabitlenmesi
scaleMode box Öğenin görülebilen bölgesinin boyutlandırılmasını sağlayan box, öğenin tamamının boyutlandırılmasını sağlayan contents değerlerini alabilir. originalHeight ve originalWidth değişkenleri kullanılarak uygulanacak boyutun tam değerleri de verilebilir, {originalHeight: 400, originalWidth: 200}
scaleFrom 100.0 Boyutlandırmanın başlangıç yüzdesi
Örnek
1
2
3
4
5

<div>
    <a href="javascript:void()" onclick="new Effekt.Scale(this.parentNode, 120);">
    Biraz daha büyük olsun
    </a>
</div>

Bağlantıya tıklandığında yazı %120 oranında büyütülecek.

Effect.MoveBy

Öğe x ve y piksel kadar yer değiştirir.

Genel söz dizimi
1
2

new Effekt.MoveBy('element_id', y, x [, secenekler]);
new Effekt.MoveBy(element, y, x [, secenekler]);
Örnek
1
2
3
4
5

<div>
    <a href="javascript:void()" onclick="new Effekt.MoveBy(this.parentNode, -5, 20);">
    Biraz yukarı, biraz da sağa doğru
    </a>
</div>

Bağlantıya tıklandığında yazı 5 piksel yukarı, 20 piksel de sağa kayacak. Bu arada ekranın sol üst köşesinin (0,0) noktası olduğunu hatırlatalım.

Effect.Highlight

Öğenin arka plan rengini değiştirir, vurgu yapar.

Genel söz dizimi
1
2

new Effekt.Highlight('element_id' [, secenekler]);
new Effekt.Highlight(element [, secenekler]);

Efekte özel seçenekler

İsim Varsayılan Açıklama
startcolor #ffff99 Efekt başlangıcındaki arka plan rengi
endcolor #ffffff Efekt bitişindeki arka plan rengi
restorecolor background-color Efekt bittikten sonraki arka plan rengi. rgb(0, 255, 0) şeklinde belirtilmeli.
Örnek
1
2
3

<div onclick="new Effekt.Highlight(this, {startcolor: '#ff99ff', endcolor: '#999999'});">
    Pembeden griye...
</div>

`

Öğeye tıklandığında arka plan rengi pembeden griye dönüşecek.

Effect.Parallel

Birden fazla efektin aynı anda uygulanabilmesini sağlar.

Genel söz dizimi
1

new Effekt.Parallel([alt efektler] [, secenekler]);
Örnek
1
2
3
4
5
6
7
8
9

new Effect.Parallel([
    new Effect.MoveBy(öğe, 100, 0, {sync: true}),
    new Effect.Opacity(öğe, {from: 1.0, to: 0.0, sync: true})
], {
    duration: 0.5,
    afterFinish: function(effect) {
        Element.hide(effect.effects[0].element.parentNode)
    }
});

MoveBy ve Opacity efektleri aynı öğeye uygulanıyor ve efekt bittiğinde öğe gizleniyor.

Bu yazı Aralık 2006 tarihinde PC Tech dergisinde yayınlanmıştır.

Comments