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

ş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:

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. 25’in üstünü zaten insan gözü algılamaz (Varsayılan: 25. En fazla 100 olabilir.)
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 dâhil 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:

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.

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

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:

Örnek:

Öğ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:

Efekte özel seçenekler:
scaleX : Yatay olarak boyutlandırma (Varsayılan: “trueâ€?).
scaleY : Dikey olarak boyutlandırma (Varsayılan: “trueâ€?).
scaleContent : İçeriğin de boyutlandırılması (Varsayılan: “trueâ€?).
scaleFromCenter : Öğenin merkez koordinatlarının sabitlenmesi (Varsayılan: “falseâ€?).
scaleMode : Öğenin görülebilen bölgesinin boyutlandırılmasını sağlayan ‘box’ (varsayılan), öğ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.
scaleMode : { originalHeight: 400, originalWidth: 200 }
scaleFrom : Boyutlandırmanın başlangıç yüzdesi (Varsayılan: 100.0).

Örnek:

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:

Örnek:

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:

Efekte özel seçenekler:
startcolor : Efekt başlangıcındaki arka plan rengi (Varsayılan: “#ffff99â€?, açık sarı).
endcolor : Efekt bitişindeki arka plan rengi (Varsayılan: “#ffffffâ€?, beyaz).
restorecolor : Efekt bittikten sonraki arka plan rengi (Varsayılan: CSS değerlerindeki “background-colorâ€? değeri. “rgb(0, 255, 0)â€? şeklinde belirtilmiş olmalı).

Örnek:

Öğ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:

Örnek:

“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.

Filed under: Kategorilenmemiş