Üye Kayıt Üye Giriş

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


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.

Bilgisayar Dershanesi Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER