script.aculo.us - Genel Bakış

Script.aculo.us nedir?

script.aculo.us, Prototype JavaScript Framework üzerine kurulmuş , GUI'yi geliştiren ve web kullanıcılarına Web 2.0 deneyimi sağlayan bir JavaScript kitaplığıdır .

script.aculo.us, Thomas Fuchs tarafından geliştirilmiş ve ilk olarak Haziran 2005'te halka açılmıştır.

script.aculo.us, Belge Nesne Modeli (DOM) aracılığıyla dinamik görsel efektler ve kullanıcı arabirimi öğeleri sağlar.

Prototip JavaScript Çerçevesi, Ajax çerçevesi ve diğer yardımcı programlar sağlayan Sam Stephenson tarafından oluşturulan bir JavaScript çerçevesidir.

Script.aculo.us Nasıl Kurulur?

Script.aculo.us kütüphanesini kurmak oldukça basittir. Üç basit adımda kurulabilir -

En son sürümü uygun bir pakette indirmek için indirme sayfasına gidin .
İndirilen paketi açın ve aşağıdaki klasörleri bulacaksınız -
- lib - prototype.js dosyasını içerir.
- src - aşağıdaki 8 dosyayı içerir -
  - builder.js
  - controls.js
  - dragdrop.js
  - effects.js
  - scriptaculous.js
  - slider.js
  - sound.js
  - unittest.js
- test - test amaçlı dosyalar içerir.
- CHANGELOG - Tüm değişikliklerin geçmişini içeren dosya.
- MIT-LICENSE - Lisans koşullarını açıklayan dosya.
- README - Kurulum talimatlarını içeren kurulum paketini açıklayan dosya.
Şimdi aşağıdaki dosyaları web sitenizin bir dizinine koyun, örneğin / javascript.
- builder.js
- controls.js
- dragdrop.js
- effects.js
- scriptaculous.js
- slider.js
- prototype.js

NOTE - sound.js ve unittest.js dosyaları isteğe bağlıdır

Script.aculo.us Kitaplığı Nasıl Kullanılır?

Şimdi script.aculo.us betiğini aşağıdaki gibi ekleyebilirsiniz -

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script >
   </head>
	
   <body>
      ........
   </body>
</html>

Varsayılan olarak, scriptaculous.js efektler, sürükle ve bırak, kaydırıcılar ve diğer tüm script.aculo.us özellikleri için gerekli diğer tüm JavaScript dosyalarını yükler.

Tüm özelliklere ihtiyacınız yoksa, virgülle ayrılmış bir listede belirterek yüklenen ek komut dosyalarını sınırlayabilirsiniz, örneğin -

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      ........
   </body>
</html>

Belirtilebilecek komut dosyaları şunlardır:

effects
dragdrop
builder
controls
slider

NOTE - Bazı betiklerin düzgün çalışması için diğerlerinin yüklenmesi gerekir.

Script.aculo.us Kitaplık İşlevi Nasıl Çağırılır?

Bir script.aculo.us kitaplık işlevini çağırmak için, aşağıda gösterildiği gibi HTML komut dosyası etiketlerini kullanın -

<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

      <script type = "text/javascript" language = "javascript">
         // <![CDATA[
         function action(element){
            new Effect.Highlight(element, 
               { startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00",  duration: 8 });
         }
         // ]]>
      </script>
   </head>
	
   <body>
      <div id = "id" onclick = "action(this);">
         Click on this and see how it change its color.
      </div>
   </body>
</html>

Burada Efekt modülünü kullanıyoruz ve bir elemente Vurgu efekti uyguluyoruz .

Bu, aşağıdaki sonucu verecektir -

Herhangi bir modülün işlevini çağırmanın başka bir kolay yolu, olay işleyicilerin içinde aşağıdaki gibidir -

<html>
   <head>
      <title>script.aculo.us examples</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      <div onclick = "new Effect.BlindUp(this, {duration: 5})">
         Click here if you want this to go slooooow.
      </div>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -