Ana Sayfa

Bilgisayar Eğitim CD

Bilgisayar Kitapları
 
Bilgisayar Dershanesi Eğitim Marketi
 
Adım Adım Web Eğitim Seti Adobe Flash Eğitim Seti


Ajax Dersleri

Ajax Eğitim Seti

Script.aculo.us ile Açılır Kapanır Menü

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:

  1. Effect.OpenUp = function(element) {   element = $(element);   new  Effect.BlindDown(element, arguments[1] || {});   }

  2.  

  3. Effect.CloseDown =  function(element) {   element = $(element);   new Effect.BlindUp(element,  arguments[1] || {});   }

  4.  

  5. 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:

  1.  

 

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:

  1. <script type="text/javascript" />

  2. <script type="text/javascript" />

  3. <script type="text/javascript" />

 

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:

  1. <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:

  1. <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:

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

  2. </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:

  1.  

 

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

PLAIN TEXT

PHP:

  1. <script type="text/javascript" />

  2. <script type="text/javascript" />

  3. <script type="text/javascript" />

  4. <center>

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

  6. <a href="javascript:Effect.Combo('reklam',%20{duration:%200.5});">+ / -</a>

  7.  

  8. </center>

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.