Ana Sayfa

Bilgisayar Eğitim CD

Bilgisayar Kitapları

 
 
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:

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.

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

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ı):

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:

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:

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:

PHP:

  1.  

 

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

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.