script.aculo.us - Panoramica

Cos'è script.aculo.us?

script.aculo.us è una libreria JavaScript costruita sopra il prototipo JavaScript Framework, che migliora la GUI e offre agli utenti web l'esperienza del Web 2.0.

script.aculo.us è stato sviluppato da Thomas Fuchs ed è stato rilasciato al pubblico per la prima volta nel giugno 2005.

script.aculo.us fornisce effetti visivi dinamici ed elementi dell'interfaccia utente tramite il Document Object Model (DOM).

Il prototipo JavaScript Framework è un framework JavaScript creato da Sam Stephenson che fornisce un framework Ajax e altre utilità.

Come installare script.aculo.us?

È abbastanza semplice installare la libreria script.aculo.us. Può essere configurato in tre semplici passaggi:

Vai alla pagina di download per scaricare l'ultima versione in un comodo pacchetto.
Decomprimi il pacchetto scaricato e troverai le seguenti cartelle:
- lib - contiene il file prototype.js.
- src - contiene i seguenti 8 file -
  - builder.js
  - controls.js
  - dragdrop.js
  - effects.js
  - scriptaculous.js
  - slider.js
  - sound.js
  - unittest.js
- test - contiene file a scopo di test.
- CHANGELOG - File che contiene la cronologia di tutte le modifiche.
- MIT-LICENSE - File che descrive i termini della licenza.
- README - File che descrive il pacchetto di installazione comprese le istruzioni di installazione.
Ora metti i seguenti file in una directory del tuo sito web, ad esempio / javascript.
- builder.js
- controls.js
- dragdrop.js
- effects.js
- scriptaculous.js
- slider.js
- prototype.js

NOTE - I file sound.js e unittest.js sono facoltativi

Come usare la libreria script.aculo.us?

Ora puoi includere lo script script.aculo.us come segue:

<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>

Per impostazione predefinita, scriptaculous.js carica tutti gli altri file JavaScript necessari per gli effetti, il trascinamento della selezione, i cursori e tutte le altre funzionalità di script.aculo.us.

Se non hai bisogno di tutte le funzionalità, puoi limitare gli script aggiuntivi che vengono caricati specificandoli in un elenco separato da virgole, ad esempio:

<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>

Gli script che possono essere specificati sono:

effects
dragdrop
builder
controls
slider

NOTE - Alcuni script richiedono che altri vengano caricati per funzionare correttamente.

Come chiamare una funzione di libreria script.aculo.us?

Per chiamare una funzione di libreria script.aculo.us, utilizzare i tag di script HTML come mostrato di seguito:

<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>

Qui stiamo usando il modulo Effect e stiamo applicando l' effetto Highlight su un elemento.

Questo produrrà il seguente risultato:

Un altro modo semplice per chiamare la funzione di qualsiasi modulo è all'interno dei gestori di eventi come segue:

<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>

Questo produrrà il seguente risultato: