AJAX-TR.COM » Script.aculo.us ile Açılır Kapanır Menü

Merhaba arkadaşlar, ben Cumhur Korkut. Yeni bir yazar olarak ilk yazım çok iyi bilmediğim, uygulamalarınıza güzel efektler katmanızı sağlayan Script.aculo.us hakkında olsun dedim. İlk konum, herkesin hoşuna gidecek diye tahmin ediyorum. Gerçi sır saklar gibi konuşmaya gerek yok, zaten başlıktan konumuzu gördünüz, açılır kapanır menü. Tabii bunun nasıl bir şey olduğunu tam anlayamadınız, ama daha uygun bir başlık bulamamıştım.

Script.aculo.us ile açılır kapanır menü… İşte başlıyoruz:

NOT: Bize sadece Script.aculo.us yetmiyor. Ayrıca combo.js adında bir dosyaya da ihtiyacımız var. Bunun kodlarını da veriyorum:

PLAIN TEXT

PHP:

Effect.OpenUp = function(element) { element = $(element); new Effect.BlindDown(element, arguments[1] || {}); }
Effect.CloseDown = function(element) { element = $(element); new Effect.BlindUp(element, arguments[1] || {}); }
Effect.Combo = function(element) { element = $(element); if(element.style.display == 'none') { new Effect.OpenUp(element, arguments[1] || {}); }else { new Effect.CloseDown(element, arguments[1] || {}); } }

En sonunda başlıyoruz. Bize bu projede az önce verdiğim combo.js dışında prototype.js ve effects.js de gerekli. Bu dosyaları da temin ettikten sonra HTML dosyamızı yazalım:
NOT: İsterseniz hazır sayfaya da monte edebilirsiniz ama önce yeni baştan sayfa oluşturarak işi kavrayalım.

PLAIN TEXT

PHP:

<html>
<head>

Bu kodlarla HTML’yi açıyor ve HEAD kısmına geliyoruz. Şimdi gerekli JS kütüphanelerimizi sayfamıza davet edelim ve HEAD’i kapatalım

PLAIN TEXT

PHP:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/combo.js"></script>
</head>

NOT: Ben burada bu kütüphaneleri “js” adında bir klasöre koydum, siz de bu kütüphane yollarını kendinize uygun olarak değiştirin.

BODY’yi açalım ve içeriği ortayalayım(isteğe bağlı):

PLAIN TEXT

PHP:

<body>
<center>

Açılıp kapanacak DIV’imizi oluşturalım. Ben örnek olarak “reklam” adını verdim. Siz de uygulamalarınızda içeriğe göre isim verebilirsiniz. Ayrıca içine de istediğiniz içeriği yerleştirebilirsiniz. Bu bir menü de olabilir, grafik de, yazı da:

PLAIN TEXT

PHP:

<div id="reklam"><img src="http://ajax-tr.com/wp-content/themes/ajax-tr/images/bg-header.jpg" /></div>

DIV’i oluşturduktan sonra bunun açılıp kapanması için bir olayın olması gerek. Ben bir linke tıklanmasını tercih ettim. Linki oluşturduktan sonra ortalamayı da kapatalım:

PLAIN TEXT

PHP:

<a href="javascript:Effect.Combo('reklam', {duration: 0.5});">Aç Kapa</a>
</center>

NOT: “duration” özelliğiyle açılıp kapanma hızını belirtebilirsiniz.

BODY’i ve HTML’yi kapatıp sayfayı tamamlayalım:

PLAIN TEXT

PHP:

</body>
</html>

Tüm sayfanın kodlarını da şu şekilde verelim:

PLAIN TEXT

PHP:

<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/combo.js"></script>
</head>
<body>
<center>
<div id="reklam">
<img src="http://ajax-tr.com/wp-content/themes/ajax-tr/images/bg-header.jpg">
</div>
<a href="javascript:Effect.Combo('reklam', {duration: 0.5});">+ / -</a>
</center>
</body>
</html>

Uygulamayı test etmek için tıklayın!

Uygulamanın örneğini indirmek için tıklayın!

Bu kadar basit olacağını düşünmüyordunuz değil mi? Neyse, ilk dersimizi başarıyla tamamladık. Umarım ilk yazımı keyifle okumuşsunuzdur. – sanki hikaye yazmışım gibi – Neyse, dileğimi değiştirip veda edeyim:
Umarım bu ders işinize yaramıştır. Hepinize iyi günler!
Cumhur KORKUT

# UMUT ÇETİNKAYA | 04 Ağustos 2007, 13:48

Ellerine Sağlık Çok Güzel bir uygulama ama benim anlamadığım acıp veya kapatırken en son bı anda tamamı gorunup acılıyor kapanıyor denediğimizde goruyoruz nedendır acaba ?

# nahnu | 04 Ağustos 2007, 21:19

peki açıkken (-) yapalıyken de (+) çıkmasını, veya bunların yerine birer imaj koymayı nasıl yapacağızdır ?

# yakuter | 04 Ağustos 2007, 23:22

@Umut dediğin hatayı ie’de veriyor ve malesef sebebini tam olarak bilemiyorum Ben daha çok JQuery kullanmayı seviyorum. Bir de efekt konusunda genelde Mootools daha çok tavsiye ediliyor. Bir ara onu da inceleyip yazmayı düşünüyoruz.

@nahnu, sorunun cevabını bundan sonraki makale olan Script.aculo.us Kopya Kağıdı‘nda verdim. Oraya örnek bir kod yazdım. Göster ve Kapat resimleri ile “reklam” divini gösterip kapatmayı görebilirsin. Kütüphaneye hakim olmadığım için fazla detaya inemedim ama kopya kağıdında güzel şeyler var, bir bak istersen.

# Hakan ERSU | 06 Ağustos 2007, 17:00

Gerçekten güzel bir yazı olmuş ama bu tarz efektler için Script.aculo.us yerine bence daha basit ve küçük boyutlarda kütüphaneler kullanmak daha ideal olabilir.Mootools bile eğer sadece bu efekt için kullanılacaksa boyut olarak büyük olabilir.Kullanım kolaylığı ve boyutları nedeniyle eğer sadece bu efekt üzerine kurulu bir sisteminiz varsa SimpleJs tavsiye ediyorum.

# yiGit | 09 Ağustos 2007, 17:01

peki sayfa ilk açıldığında bu menü’nün kapalı olarak açılmasını nasıl sağlarız?

# yiGit | 09 Ağustos 2007, 17:35

Sayfa açıldığında menü’nün kapalı olarak açılmasını sağladım..
Yapmışken başkaları da sorabilir diye ekliyeyim..
div tag’inin devamına style=”display:none;” eklediğimiz zaman menümüz kapalı olarak geliyor

# Hakan ERSU | 09 Ağustos 2007, 23:29

Bu scirptte tam olarak işe yararmı bilmem ama katmana style=’display:none;’ ifadesini vermek yeterli olabilir.
Ayrıca http://www.mibhouse.org/pokemon_jojo/dev/test-pbbsidebar.html buna da göz atabilirsiniz.

# ßerat | 13 Ağustos 2007, 14:43

Teşekkürler arkadaşlar

# sesebian | 15 Ağustos 2007, 15:41

Ana dizine gönderilecek 3 dosyayı Ftp dışında nerden gösterebiliriz, örnek blogger için?

# ismail sait | 22 Ağustos 2007, 11:11

Merhaba bu örneği kullandım fakat sizin vermiş olduğunuz demodada olduğu gibi açıp kapatırken bir sekme söz konusu ve hiçde hoş durmuyor acaba bu sekme neden kaynaklanıyor yardımcı olurmusunuz ? benim örneği kullandığım yer http://new.askcell.com/img.asp?img=14 buradaki yorum yap linkine tıklarsanız görürsünüz

# » Blogunuza hızlı yorum yazma ekleyin | 22 Ağustos 2007, 17:37

[…] Arkadaşım nucrotion ile beraber bulup beraber yaptığımız bu minik sistem sayesinde blogumuzu gezen misafirlerimiz ekstra bir sayfaya girmeden direk index.ten yazılara yorum yazmalarını sağlıyor . Bana soracak olursanız tek sorun blogunuzu biraz yavaşlata bilecek olması . Çok fazla hissedilmiyor ama tabi temadan temaya değişir . İlk olarak blogumuzda şu ajax-tr deki açılır kapanır menü scripti‘nin yüklü olması gerek . Çünki yorumları ana sayfamızda bu kod ile açıp kapatacağız . Eğer bu scripti yüklediyseniz veya yüklüyse devam edebiliriz. […]

# Harun | 24 Ağustos 2007, 06:24

Bu efecti kolaylıkla effect.toggle ile yapabilirsin yalnız.
bu kadar uğraşmaya gerenk yok …

# TaneR | 04 Eylül 2007, 22:36

ben bu açılır kapanır menü olayını yazılarımda nasıl yapabilirim.Yani anasayfamda sadece yazıların başlıkları görünsün,tıklayınca yazı açılsın istiyorum.Yapabilirmiyim,yardım ederseniz sevinirim.

# sportmeen | 05 Eylül 2007, 12:35

konuyu biraz daha açıklasaydık daha iyi olurdu çünkü ben pek bişe anlamadım combo.js, effects.js, combo.js dosyaları nerde içerikleri ne bunları açıklasaydınız daha güzel olurdu diyorum yine de teşekkürler

# ergin | 23 Eylül 2007, 01:42

http://www.fmturkiye.net/ajax/piakm/ornek.html

Link silinmiş

# yusuf | 14 Ekim 2007, 19:34

Bu basit mi. tabi basit. yapılan tek şey kopyala yapıştır. en azından bizim için. peki arkadaşlar effects.js diye bi dosya var. içinde de bi dünya kod var. biz onu nası yazacaz onu bi deseniz tam süper olur. kopyalamak kolay ama daha güzeli var kendin yapabilmek.

yinede sağolun. ayrıca site süper

# ali sami | 19 Ekim 2007, 13:01

tşk arkadaşlar…

# neXus | 25 Ekim 2007, 19:58

@yusuf, o dosyada önceden birinin bizim kullanmamız için yazdığı kodlar var. o dosyayı sıfırdan yazmadan önce o dosyayı kullanarak birşeyler yapmak en iyisi. yani sadece kopyala yapıştır yapma, o dosyayı kullanarak başka şeyler yap çünkü onu sıfırdan yazmak çok kolay degil