script.aculo.us - Guida rapida

Cos'è script.aculo.us?

script.aculo.us è una libreria JavaScript costruita sulla parte superiore del prototipo JavaScript Framework, che migliora la GUI e offre un'esperienza Web 2.0 agli utenti web.

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 drag-and-drop, 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 degli 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:

script.aculo.us è diviso in moduli, ciascuno con il proprio file JavaScript. Questi moduli sono spiegati qui -

Effetti

Il modulo effetti include più di venticinque effetti visivi e sette modalità di transizione.

Trascinare e rilasciare

Utilizzerai il modulo di trascinamento della selezione per rendere trascinabile qualsiasi elemento , trasformarlo in una zona di rilascio o persino ordinare un'intera serie di elementi in modo da poterli riorganizzare trascinandoli e rilasciandoli.

Sliders

Un cursore è una sorta di piccola guida o binario, lungo il quale è possibile far scorrere una maniglia. Si traduce in un valore numerico. Con script.aculo.us, puoi creare tali cursori con molto controllo.

Completamento automatico

I controlli del completamento automatico consentono il completamento automatico dei campi di input di testo in stile Google-Suggest, locale e basato sul server.

Modifica sul posto

Puoi rendere qualsiasi testo o raccolta di elementi modificabile sul posto semplicemente facendo clic su di esso.

Costruttore

Un aiuto per creare frammenti DOM in JavaScript. Questo è uno strumento per sviluppatori che semplifica notevolmente la creazione di DOM.

Suono

La versione 1.7.1 ha introdotto un sistema audio che consente di riprodurre facilmente i suoni, metterli in coda, utilizzare più tracce e così via.

Gli effetti script.aculo.us sono divisi in due gruppi:

Effetti principali

I seguenti sei effetti principali costituiscono la base della libreria JavaScript script.aculo.us Visual Effects.

Effect.Opacity
Effect.Scale
Effect.Morph
Effect.Move
Effect.Highlight
Effect.Parallel

Tutti gli effetti principali supportano vari parametri comuni e parametri specifici degli effetti e questi nomi di effetti fanno distinzione tra maiuscole e minuscole.

Tutti i parametri comuni specifici degli effetti sono stati discussi in questo tutorial insieme agli effetti.

Effetti di combinazione

Tutti gli effetti di combinazione si basano sui cinque effetti principali e sono pensati come esempi per consentire di scrivere i propri effetti.

Di solito questi effetti si basano sull'esecuzione parallela e sincronizzata di altri effetti. Tale esecuzione è prontamente disponibile, quindi creare i propri effetti combinati è molto semplice. Ecco un elenco di effetti di combinazione:

Effect.Appear
Effect.Fade
Effect.Puff
Effect.DropOut
Effect.Shake
Effect.SwitchOff
Effect.BlindDown
Effect.BlindUp
Effect.SlideDown
Effect.SlideUp
Effect.Pulsate
Effect.Squish
Effect.Fold
Effect.Grow
Effect.Shrink

Inoltre, c'è il file Effect.toggle metodo di utilità per gli elementi che si desidera mostrare temporaneamente con un'animazione Appear / Fade, Slide o Blind.

Effect.toggle

File di libreria richiesti per gli effetti

Per utilizzare le funzionalità degli effetti di script.aculo.us, dovrai caricare il modulo degli effetti. Quindi, il caricamento minimo per script.aculo.us sarà simile a questo:

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

Richiama funzioni effetto

Il modo corretto per avviare un effetto principale è solitamente con il newoperatore. A seconda delle tue preferenze, puoi utilizzare una delle due sintassi:

Sintassi

new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])

Queste due sintassi sono tecnicamente equivalenti. La scelta tra i due dipende principalmente dal tuo personale senso dell'estetica del codice.

Esempio

Qui ci sono due chiamate equivalenti, quindi puoi vedere come sono correlate le sintassi, che sono molto intercambiabili -

new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });

La caratteristica più popolare dell'interfaccia Web 2.0 è la funzione di trascinamento della selezione. Fortunatamente script.aculo.us è dotato di una capacità intrinseca di supportare il drag and drop.

Per utilizzare le funzionalità di trascinamento di script.aculo.us, è necessario caricare il file dragdrop modulo, che richiede anche il effectsmodulo. Quindi il tuo caricamento minimo per script.aculo.us sarà simile a questo:

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

Trascinando le cose in giro

È molto semplice rendere un elemento trascinabile utilizzando script.aculo.us. Richiede la creazione di un'istanza della classe Draggable e l'identificazione dell'elemento da rendere trascinabile.

Sintassi trascinabile

new Draggable( element, options );

Il primo parametro del costruttore identifica l'elemento da rendere trascinabile come id dell'elemento o come riferimento all'elemento. Il secondo parametro specifica informazioni facoltative su come deve comportarsi l'elemento trascinabile.

Opzioni trascinabili

È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto trascinabile.

Opzione	Descrizione	Esempi
ripristinare	Se impostato su true , l'elemento torna alla sua posizione originale al termine del trascinamento. Specifica anche se verrà richiamato il callback dell'effetto reverte quando l'operazione di trascinamento si interrompe. Il valore predefinito è false .	Esempio
scatto	Usato per fare in modo che un oggetto trascinabile si agganci a una griglia o per vincolarne il movimento. Se false (impostazione predefinita), non si verificano snap o vincoli. Se viene assegnato un numero intero x, l'elemento trascinabile si aggancia a una griglia di x pixel. Se un array [x, y], il trascinamento orizzontale si aggancerà a una griglia di x pixel e la verticale si aggancerà a y pixel. Può anche essere una funzione conforme a Function (x, y, trascinabile) che restituisce un array [x, y].	Esempio
zindex	Specifica lo z-index CSS da applicare all'elemento durante un'operazione di trascinamento. Per impostazione predefinita, lo z-index dell'elemento è impostato su 1000 durante il trascinamento.	Esempio
ghosting	Booleano che determina se il trascinabile deve essere clonato per il trascinamento, lasciando l'originale in posizione fino a quando il clone non viene rilasciato. Il valore predefinito è false .	Esempio
vincolo	Una stringa utilizzata per limitare le direzioni trascinabili, orizzontale o verticale . Il valore predefinito è null che significa libera circolazione.	Esempio
maniglia	Specifica un elemento da utilizzare come maniglia per avviare l'operazione di trascinamento. Per impostazione predefinita, un elemento è il proprio handle.	Esempio
starteffect	Un effetto richiamato sull'elemento durante il trascinamento inizia. Per impostazione predefinita, cambia l'opacità dell'elemento a 0,2 in 0,2 secondi.	Esempio
riverbero	Un effetto richiamato sull'elemento quando il trascinamento viene annullato. Il valore predefinito è una diapositiva uniforme nella posizione originale dell'elemento. Chiamato solo se il ripristino è vero.	Esempio
endeffect	Un effetto richiamato sull'elemento durante il trascinamento termina. Per impostazione predefinita, cambia l'opacità dell'elemento a 1,0 in 0,2 secondi.	Esempio

Opzioni di richiamata

Inoltre, puoi utilizzare una delle seguenti funzioni di callback nel parametro delle opzioni:

Funzione	Descrizione	Esempi
onStart	Chiamato quando viene avviato un trascinamento.	Esempio
onDrag	Chiamato ripetutamente quando un mouse si sposta, se la posizione del mouse cambia rispetto alla chiamata precedente.	Esempio
modificare	Chiamato proprio come onDrag (che è il callback preferito).	Esempio
alla fine	Chiamato quando termina un trascinamento.	Esempio

Ad eccezione del callback "change", ognuno di questi callback accetta due parametri: l'oggetto trascinabile e l'oggetto evento del mouse.

Esempio trascinabile

Qui definiamo 5 elementi che possono essere trascinati: tre elementi <div>, un elemento <img> e un elemento <span>. Lo scopo dei tre diversi elementi <div> è dimostrare che indipendentemente dal fatto che un elemento inizi con una regola di posizionamento statica (predefinita), relativa o assoluta, il comportamento di trascinamento non viene influenzato.

<html>
   <head>
      <title>Draggables Elements</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
      
      <script type = "text/javascript">
         // Take all the elements whatever you want to make Draggable.
         var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
			
         // Make all the items drag able by creating Draggable objects
         window.onload = function() {
            elements.each(function(item) { new Draggable(item, {});});
         }			
      </script>
   </head>

   <body>
      <div id = "normaldiv">
         This is a normal div and this is dragable.
      </div>

      <div id = "relativediv" style="position: relative;">
         This is a relative div and this is dragable.
      </div>

      <div id = "absolutediv" style="position: absolute;">
         This is an absolute div and this dragable.
      </div>
      <br />
		
      <img id = "image" src = "/images/scriptaculous.gif"/>

      <p>Let part <span id = "span" style = "color: blue;"> 
         This is middle part</span> Yes, only middle part is dragable.</p>
   </body>
</html>

Questo produrrà il seguente risultato:

Eliminazione di oggetti trascinati

Un elemento viene convertito in una destinazione di rilascio tramite una chiamata al metodo add () all'interno di uno spazio dei nomi chiamato Droppables .

Lo spazio dei nomi Droppables ha due metodi importanti: add () per creare un obiettivo di rilascio e remove () per rimuovere un obiettivo di rilascio.

Sintassi

Ecco la sintassi del metodo add () per creare un obiettivo di rilascio. Il metodo add () crea una destinazione di rilascio dall'elemento passato come primo parametro, utilizzando le opzioni nell'hash passato come secondo.

Droppables.add( element, options );

La sintassi per remove () è ancora più semplice. Il metodo remove () rimuove il comportamento dell'obiettivo di rilascio dall'elemento passato.

Droppables.remove(element);

Opzioni

È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto trascinabile.

Opzione	Descrizione	Esempi
Hoverclass	Il nome di una classe CSS che verrà aggiunta all'elemento mentre il droppable è attivo (ha un passaggio trascinabile accettabile su di esso). Il valore predefinito è null.	Esempio
Accettare	Una stringa o un array di stringhe che descrivono le classi CSS. Il droppable accetterà solo i trascinabili che hanno una o più di queste classi CSS.	Esempio
Contenimento	Specifica un elemento o una matrice di elementi che deve essere un elemento padre di un elemento trascinabile affinché possa essere accettato dalla destinazione di rilascio. Per impostazione predefinita, non vengono applicati vincoli di contenimento.	Esempio
Sovrapposizione	Se impostato su "orizzontale" o "verticale", il trascinabile reagirà solo se si sovrappone di oltre il 50% nella direzione data. Usato da Sortables, discusso nel prossimo capitolo.
avido	Se true (predefinito), smette di passare il mouse su altri droppabili, sotto il trascinabile non verrà eseguita la ricerca.	Esempio

Opzioni di richiamata

Inoltre, puoi utilizzare una delle seguenti funzioni di callback nel parametro delle opzioni:

Funzione	Descrizione	Esempi
onHover	Specifica una funzione di callback che viene attivata quando un elemento trascinabile adatto passa sopra la destinazione di rilascio. Usato da Sortables, discusso nel prossimo capitolo.
onDrop	Specifica una funzione di callback che viene chiamata quando un elemento trascinabile adatto viene rilasciato sulla destinazione di rilascio.	Esempio

Esempio

Qui, la prima parte di questo esempio è simile al nostro esempio precedente, tranne per il fatto che abbiamo utilizzato la pratica funzione $ A () di Prototype per convertire un elenco di nodi di tutti gli elementi <img> nell'elemento con l'id di trascinabili in un array .

<html>
   <head>
      <title>Drag and Drop Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            // Make all the images draggables from draggables division.
				
            $A($('draggables').getElementsByTagName('img')).each(function(item) {
               new Draggable(item, {revert: true, ghosting: true});
            });

            Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});
				
            // Set drop area by default  non cleared.
            $('droparea').cleared = false;
         }
   
         // The target drop area contains a snippet of instructional
         // text that we want to remove when the first item
         // is dropped into it.
			
         function moveItem( draggable,droparea){
            if (!droparea.cleared) {
               droparea.innerHTML = '';
               droparea.cleared = true;
            }
				
            draggable.parentNode.removeChild(draggable);
            droparea.appendChild(draggable);
         }
      </script>

      <style type = "text/css">
         #draggables {
            width: 172px;
            border: 3px ridge blue;
            float: left;
            padding: 9px;
         }
			
         #droparea {
            float: left;
            margin-left: 16px;
            width: 172px;
            border: 3px ridge maroon;
            text-align: center;
            font-size: 24px;
            padding: 9px;
            float: left;
         }
			
         .hoverActive {
            background-color: #ffffcc;
         }
			
         #draggables img, #droparea img {
            margin: 4px;
            border:1px solid red;
         }
      </style>
   </head>

   <body>
      <div id = "draggables">
         <img src = "/images/html.gif"/>
         <img src = "/images/css.gif"/>
         <img src = "/images/xhtml.gif"/>
         <img src = "/images/wml_logo.gif"/>
         <img src = "/images/javascript.gif"/>
      </div>

      <div id = "droparea">
         Drag and Drop Your Images in this area
      </div>
   </body>
</html>

Questo produrrà il seguente risultato:

Molte volte, è necessario fornire all'utente la possibilità di riordinare gli elementi (come gli elementi in un elenco) trascinandoli.

Senza il drag and drop, il riordino può essere un incubo, ma script.aculo.us fornisce un supporto esteso per il riordino fuori dagli schemi attraverso la classe Sortable . L'elemento da diventare Sortable viene passato al metodo create () nello spazio dei nomi Sortable.

Un Ordinabile è costituito da elementi articolo in un elemento contenitore. Quando crei un nuovo Ordinabile, si occupa della creazione dei corrispondenti Trascinabili e Droppable .

Per utilizzare le funzionalità Sortable di script.aculo.us, dovrai caricare il file dragdrop modulo, che richiede anche il effectsmodulo. Quindi il tuo caricamento minimo per script.aculo.us sarà simile a questo -

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

Sintassi ordinabile

Ecco la sintassi del metodo create () per creare un elemento ordinabile. Il metodo create () prende l' id di un elemento contenitore e lo ordina in base alle opzioni passate.

Sortable.create('id_of_container',[options]);

Utilizzare Sortable.destroy per rimuovere completamente tutti i gestori di eventi e i riferimenti a un oggetto Sortable creato da Sortable.create.

NOTE- Una chiamata a Sortable.create, chiama implicitamente Sortable.destroy se l'elemento a cui si fa riferimento era già un Sortable. Ecco la semplice sintassi per chiamare la funzione di distruzione.

Sortable.destroy( element );

Opzioni ordinabili

È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto ordinabile.

Suor n	Opzione e descrizione
1	tag Specifica il tipo di elementi all'interno del contenitore ordinabile che devono essere ordinabili tramite trascinamento. Il valore predefinito è "li".
2	only Specifica un nome di classe CSS, o un array di nomi di classe, che un elemento trascinabile deve possedere per essere accettato dalla destinazione di rilascio. Questo è simile alla accetta possibilità di Draggable. Per impostazione predefinita, non vengono applicati vincoli al nome della classe.
3	overlap Uno di falso, orizzontale o verticale . Controlla il punto in cui viene attivato un riordino. Il valore predefinito è verticale .
4	constraint Uno di falso, orizzontale o verticale . Limita il movimento degli elementi ordinabili trascinati. Il valore predefinito è verticale .
5	containment Consente di trascinare e rilasciare tra i Sortables. Accetta un array di elementi o ID elemento. Nota importante: per garantire che sia possibile il trascinamento bidirezionale tra i contenitori, inserire tutte le chiamate Sortable.create dopo gli elementi del contenitore.
6	handle Uguale all'opzione Trascinabile con lo stesso nome, che specifica un elemento da utilizzare per avviare le operazioni di trascinamento. Per impostazione predefinita, ogni elemento è il proprio handle.
7	hoverclass Specifica un nome di classe CSS da applicare agli elementi ordinabili non trascinati quando un elemento trascinato passa su di essi. Per impostazione predefinita, non viene applicato alcun nome di classe CSS.
8	ghosting Simile all'opzione Trascinabile con lo stesso nome, se vera, questa opzione fa sì che l'elemento originale di un'operazione di trascinamento rimanga in posizione mentre una copia semitrasparente dell'elemento viene spostata insieme al puntatore del mouse. Il valore predefinito è false . Questa opzione non funziona con IE.
9	dropOnEmpty Se true, consente di rilasciare elementi ordinabili in un elenco vuoto. Il valore predefinito è false .
10	scroll Se il contenitore ordinabile possiede una barra di scorrimento a causa dell'impostazione dell'attributo di overflow CSS, questa opzione abilita lo scorrimento automatico dell'elenco oltre gli elementi visibili. Il valore predefinito è false .
12	scrollSensitivity Quando lo scorrimento è abilitato, regola il punto in cui viene attivato lo scorrimento. Il valore predefinito è 20.
13	scrollSpeed Quando lo scorrimento è abilitato, regola la velocità di scorrimento. Il valore predefinito è 15.
14	tree Se true, abilita l'ordinamento con sottoelementi all'interno dell'elemento ordinabile. Il valore predefinito è false.
15	treeTag Se l'opzione albero è abilitata, specifica il tipo di elemento contenitore del sottoelemento i cui figli prendono parte al comportamento ordinabile. Il valore predefinito è "ul".

È possibile fornire i seguenti callback nel parametro delle opzioni:

Suor n	Opzione e descrizione
1	onChange Una funzione che verrà chiamata ogni volta che l'ordinamento cambia durante il trascinamento. Quando si trascina da un Ordinabile a un altro, la richiamata viene chiamata una volta su ogni Ordinabile. Ottiene l'elemento interessato come parametro.
2	onUpdate Una funzione che verrà chiamata al termine di un'operazione di trascinamento che si traduce in una modifica nell'ordine degli elementi.

Esempi di ordinamento

Questa demo è stata verificata per funzionare in IE 6.0. Funziona anche nell'ultima versione di Firefox.

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>
   
   <body>
      <p>Drag and drop list items to sort them out</p>

      <ul id = "namelist">
         <li>Physics</li>
         <li>Chemistry</li>
         <li>Maths</li>
         <li>Botany</li>
         <li>Sociology</li>
         <li>English</li>
         <li>Hindi</li>
         <li>Sanskrit</li>
      </ul>
   </body>
</html>

Usa il nostro compilatore online per una migliore comprensione del codice con diverse opzioni discusse nella tabella sopra.

Questo produrrà il seguente risultato:

Nota l'utilizzo del tag: "li" . Allo stesso modo, puoi ordinare il seguente elenco di immagini disponibili in <div> -

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('imagelist',{tag:'div'});
         }
      </script>

      <style type = "text/css">
         div { cursor: move; }
         img { border: 1px solid red; margin:5px; }
      </style>
   </head>

   <body>
      <p>Drag and drop list images to re-arrange them</p>

      <div id = "imagelist">
         <div><img src = "/images/wml_logo.gif" alt="WML Logo" /></div>
         <div><img src = "/images/javascript.gif" alt="JS" /></div>
         <div><img src = "/images/html.gif" alt="HTML" /></div>
         <div><img src = "/images/css.gif" alt="CSS" /></div>
      </div>
   </body>
</html>

Questo produrrà il seguente risultato:

Serializzazione degli elementi ordinabili

L'oggetto Sortable fornisce anche una funzione Sortable.serialize () per serializzare il Sortable in un formato adatto alle richieste HTTP GET o POST. Questo può essere utilizzato per inviare l'ordine del Sortable tramite una chiamata Ajax.

Sintassi

Sortable.serialize(element, options);

Opzioni

È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto ordinabile.

Suor n	Opzione e descrizione
1	tag Imposta il tipo di tag che verrà serializzato. Sarà simile a ciò che viene utilizzato in Sortable.create .
2	name Imposta il nome della chiave che verrà utilizzata per creare le coppie chiave / valore per la serializzazione in formato HTTP GET / POST. Quindi, se il nome fosse xyz, la stringa della query sarebbe simile a - xyz [] = valore1 & xyz [] = valore2 & xyz [] = valore3 Dove i valori vengono derivati dagli elementi figlio nell'ordine in cui appaiono all'interno del contenitore.

Serializza esempi

In questo esempio, l'output della serializzazione fornirà solo i numeri dopo il trattino basso negli ID degli elementi dell'elenco.

Per provare, lasciare le liste nell'ordine originale, premere il pulsante per vedere la serializzazione delle liste. Ora riordina alcuni elementi e fai di nuovo clic sul pulsante.

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }

         function serialize(container, name){
            $('display').innerHTML = 'Serialization of ' + 
            $(container).id + 
            ' is: <br/><pre>' + 
               Sortable.serialize( container,{ name:name} ) + 
            '</pre>';
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>	
   </head>

   <body>
      <p>Drag and drop list items to sort them out properly</p>

      <ul id = "namelist">
         <li id = "list1_1">Physics</li>
         <li id = "list1_2">Chemistry</li>
         <li id = "list1_3">Maths</li>
         <li id = "list1_4">Botany</li>
         <li id = "list1_5">Sociology</li>
         <li id = "list1_6">English</li>
      </ul>

      <p>Click following button to see serialized list which can be
         passed to backend script, like PHP, AJAX or CGI</p>
			
      <button type = "button" value = "Click Me" 
         onclick = "serialize('namelist', 'list')"> Serialize
      </button>

      <div id = "display" style = "clear:both;padding-top:32px"></div>
   </body>
</html>

Questo produrrà il seguente risultato:

Spostamento di oggetti tra i vari articoli

L'esempio seguente mostra come spostare gli elementi da un elenco a un altro elenco.

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});

            Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>		
   </head>

   <body>
      <p>Drag and drop list items from one list to another list</p>

      <div style = "float:left">
         <ul id = "List1">
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Botany</li>
         </ul>
      </div>

      <div style = "float:left;margin-left:32px">
         <ul id = "List2">
            <li>Arts</li>
            <li>Politics</li>
            <li>Economics</li>
            <li>History</li>
            <li>Sociology</li>
         </ul>
      </div>
   </body>
</html>

Notare che l' opzione di contenimento per ogni contenitore elenca entrambi i contenitori come elementi di contenimento. In questo modo, abbiamo abilitato l'ordinamento degli elementi figlio nel contesto del loro genitore; Consente inoltre di spostarli tra i due contenitori.

Abbiamo impostato dropOnEmpty su true per entrambe le liste. Per vedere l'effetto che questa opzione ha su quell'elenco, sposta tutti gli elementi da un elenco all'altro in modo che un elenco sia vuoto. Scoprirai che consente di rilasciare elementi in un elenco vuoto.

Questo produrrà il seguente risultato:

Legame con Ajax

Ovviamente, onUpdate è un ottimo candidato per l'attivazione delle notifiche Ajax al server, ad esempio quando l'utente riordina una lista di cose da fare o qualche altro set di dati. La combinazione di Ajax.Request e Sortable.serialize rende la persistenza live abbastanza semplice -

<html>
   <head>
      <title>Sorting Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List' ,
               {
                  onUpdate: function() {
                     new Ajax.Request('file.php',
                        {
                           method: "post",
                           parameters: {data:Sortable.serialize('List')}
                        }
                     );
                  }
               }
            );
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>When you will change the order, AJAX Request 
         will be made automatically.</p>

      <div style = "float:left">
         <ul id = "List">
            <li id = "List_1">Physics</li>
            <li id = "List_2">Chemistry</li>
            <li id = "List_3">Maths</li>
            <li id = "List_4">Botany</li>
         </ul>
      </div>
   </body>
</html>

Sortable.serialize crea una stringa come: List [] = 1 & List [] = 2 & List [] = 3 & List [] = 4, dove i numeri sono le parti identificative degli ID degli elementi della lista dopo il trattino basso.

Ora dobbiamo codificare file.php , che analizzerà i dati inviati come parse_str ($ _ POST ['data']); e puoi fare tutto ciò che vuoi con questi dati ordinati.

Per saperne di più su AJAX, segui il nostro semplice tutorial Ajax .

I cursori sono tracce sottili con una o più maniglie su di esse che l'utente può trascinare lungo la traccia.

L'obiettivo di uno slider è fornire un metodo di input alternativo per definire un valore numerico; il cursore rappresenta un intervallo e lo scorrimento di una maniglia lungo la traccia definisce un valore all'interno di questo intervallo.

I cursori possono essere con orientamento orizzontale o verticale. Quando è orizzontale, l'estremità sinistra della traccia di solito rappresenta il valore più basso, mentre in un orientamento verticale, la parte inferiore della diapositiva è solitamente il valore più basso.

Per utilizzare le funzionalità di scorrimento di script.aculo.us, è necessario caricare il modulo slider.js insieme al modulo prototype.js. Quindi il tuo caricamento minimo per script.aculo.us sarà simile a questo -

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider">< /script>

Creazione di un controllo Slider

La creazione di uno slider è, come al solito, una questione di costruzione di un oggetto personalizzato su alcuni elementi esistenti nel DOM della pagina. Avrai bisogno di due elementi qui, uno per la maniglia e uno per la traccia come segue:

new Control.Slider(handle, track [ , options ] );

L'elemento track è solitamente un <div> e l'elemento handle è un <div> o <span> all'interno dell'elemento track. Entrambi possono essere passati dal loro id = o da riferimenti DOM diretti, come al solito.

Opzioni cursori

È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto Slider.

Suor n	Opzione e descrizione
1	Axis Definisce l'orientamento del controllo come orizzontale o verticale . L'orientamento predefinito è orizzontale .
2	Range Definisce l'intervallo dei valori del dispositivo di scorrimento come istanza di un'istanza di Prototype ObjectRange. Il valore predefinito va da 0 a 1.
3	Values Definisce il set discreto di valori che il dispositivo di scorrimento può acquisire. Se omesso, è possibile impostare tutti i valori all'interno dell'intervallo.
4	sliderValue Imposta il valore iniziale del cursore. Se omesso, il valore rappresentato dal bordo più a sinistra (o più in alto) del cursore è il valore iniziale.
5	Disabled Se è vero, crea una diapositiva inizialmente disabilitata. Ovviamente il valore predefinito è false.
6	setValue Aggiornerà il valore del dispositivo di scorrimento e quindi sposterà la maniglia del dispositivo di scorrimento nella posizione appropriata.
7	setDisabled Imposta il dispositivo di scorrimento sullo stato disabilitato (disabilitato = vero).
8	setEnabled Imposta il dispositivo di scorrimento sullo stato abilitato (disabilitato = falso).

È possibile fornire i seguenti callback nel parametro delle opzioni:

Suor n	Opzione e descrizione
1	onSlide Chiamato ogni volta che lo Slider viene spostato mediante trascinamento. La funzione chiamata ottiene il valore dello slider come parametro.
2	onChange Chiamato ogni volta che lo Slider ha terminato di muoversi o ha avuto il suo valore modificato tramite la funzione setSlider Value. La funzione chiamata ottiene il valore dello slider come parametro.

Esempio di cursori

<html>
   <head>
      <title>Sliders Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            new Control.Slider('handle1' , 'track1',{
            range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){ $('changed').innerHTML = 'Changed Value : '+v;
               },

            onSlide: function(v) {
               $('sliding').innerHTML = 'Sliding Value: '+v; } }); new Control.Slider('handle2' , 'track2', { range: $R(1,100),
               axis:'vertical',
               sliderValue: 1,
               onChange: function(v){
                  $('changed').innerHTML = 'Changed Value : '+v; } onSlide: function(v) { $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
         }
      </script>
		
      <style type = "text/css">
         h1{ font-size: 1.5em; }
			
         .track {
            background-color: #aaa;
            position: relative;
            height: 0.5em; width: 10em;
            cursor: pointer; z-index: 0;
         }
			
         .handle {
            background-color: red;
            position: absolute;
            height: 1em; width: 0.25em; top: -0.25em;
            cursor: move; z-index: 2;
         }
			
         .track.vertical { 
            width: 0.5em; height: 10em; 
         }
			
         .track.vertical .handle {
            width: 1em; height: 0.25em; top: 0; left: -0.25em; 
         }
      </style>
   </head>

   <body>
      <h1>Simple sliders</h1>

      <div id = "track1" class = "track" style = "width: 20em;" >
         <div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
      </div>

      <p id = "sliding" ></p>
      <p id = "changed" ></p>

      <div id = "track2" class = "track vertical" style = "position: absolute; left: 25em;  top: 3em;" >
         <div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
      </div>
   </body>
</html>

Punti da notare -

Puoi cambiare l'immagine del cursore di qualsiasi cursore usando CSS. Usa le proprietà CSS background-image: url (track.gif) e background-repeat: no-repeat per impostare l'immagine del cursore.
Il valore dell'intervallo può essere specificato utilizzando $R(minValue, MaxValue). For example, $R (1, 100).
Il valore dell'intervallo può essere specificato in termini di valori specifici. Ad esempio i valori: [1,25,50,75,100]. In questo caso, il dispositivo di scorrimento raggiungerebbe solo i valori discreti elencati quando la maniglia è stata spostata.
In qualsiasi momento, il valore dello slider può essere impostato sotto il controllo del programma chiamando il metodo setValue () dell'istanza dello slider, come in: sliderInstance.setValue (50);

Questo produrrà il seguente risultato:

Per impostazione predefinita, script.aculo.us supporta due fonti per il completamento automatico:

Fonti remote (ottenute tramite Ajax),
Fonti locali (array di stringhe negli script della tua pagina web).

A seconda della fonte che intendi utilizzare, istanzerai Ajax.Autocompleter o Autocompleter.Local , rispettivamente. Sebbene dotati di opzioni specifiche, questi due oggetti condividono un ampio set di funzionalità e forniscono un'esperienza utente uniforme.

Ci sono quattro cose che passerai sempre a questi oggetti mentre li costruisci:

Il campo di testo che desideri rendere autocompletabile. Come al solito, puoi passare il campo stesso o il valore del suo attributo id =.
Il contenitore per le scelte di completamento automatico, che finirà per contenere un <ul> </li> elenco di opzioni tra cui scegliere. Di nuovo, passa l'elemento direttamente o il suoid =. Questo elemento è molto spesso un semplice <div>.</p> </li>
L'origine dati, che verrà espressa, a seconda del tipo di origine, come un array di stringhe JavaScript o come un URL all'origine remota.
Infine, le opzioni. Come sempre, vengono forniti come una sorta di hash ed entrambi gli oggetti di completamento automatico possono accontentarsi di nessuna opzione personalizzata; ci sono impostazioni predefinite adatte per tutto.

Per utilizzare le capacità di autocompletamento di script.aculo.us, dovrai caricare i moduli controls.js ed effects.js insieme al modulo prototype.js. Quindi, il caricamento minimo per script.aculo.us sarà simile a questo:

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>

Creazione di un completamento automatico Ajax

La sintassi di costruzione è la seguente:

new Ajax.Autocompleter(element, container, url [ , options ] )

Il costruttore dell'Ajax.Autocompleter accetta quattro parametri:

Il nome dell'elemento o il riferimento a un campo di testo che deve essere popolato con una scelta di dati.
Il nome dell'elemento o il riferimento a un elemento <div> da utilizzare come menu di scelte da parte del controllo.
L'URL della risorsa lato server che fornirà le scelte.
Le solite opzioni hash.

Opzioni

È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto Ajax.Autocompleter.

Suor n	Opzione e descrizione
1	paramName Il nome del parametro di query contenente il contenuto del campo di testo che viene pubblicato nella risorsa lato server. Il valore predefinito è il nome del campo di testo.
2	minChars Numero di caratteri che devono essere inseriti prima che una richiesta di scelte lato server possa essere lanciata. Il valore predefinito è 1.
3	Frequency L'intervallo, in secondi, tra i controlli interni per vedere se è necessario inviare una richiesta alla risorsa lato server. Il valore predefinito è 0.4.
4	Indicator L'id o il riferimento a un elemento da visualizzare mentre è in corso una richiesta di scelte lato server. Se omesso, nessun elemento viene rivelato.
5	Parameters Una stringa di testo contenente parametri di query aggiuntivi da passare alla risorsa lato server.
6	updateElement Una funzione di callback da attivare quando l'utente seleziona una delle scelte restituite dal server che sostituisce la funzione interna che aggiorna il campo di testo con il valore scelto.
7	afterUpdateElement Una funzione di callback da attivare dopo l'esecuzione della funzione updateElement.
8	Tokens Una singola stringa di testo o un array di stringhe di testo che indicano i token da utilizzare come delimitatori per consentire l'inserimento di più elementi nel campo di testo, ognuno dei quali può essere completato automaticamente individualmente.

Esempio

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.Autocompleter(
               'autoCompleteTextField',
               'autoCompleteMenu',
               '/script.aculo.us/serverSideScript.php', {}
            );
         }
      </script>
   </head>
   
   <body>
      <p>Type something in this box and then select suggested option from the list </p>

      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>
   </body>
</html>

Ora, abbiamo bisogno di un lato server per accedere a questa pagina e fornire l'URL dell'origine dati (serverSideScript.php). Manterrai una logica completa per visualizzare i suggerimenti in questo script.

Solo per esempio, stiamo mantenendo un semplice testo HTML in serverSideScript.php . Puoi scrivere il tuo script utilizzando CGI, PHP, Ruby o qualsiasi altro script lato server per scegliere i suggerimenti appropriati e formattarli sotto forma di <ul><li>...</li> </ul> e restituirli al programma chiamante.

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
   <li>Six</li>
</ul>

Questo produrrà il seguente risultato:

con diverse opzioni discusse nella tabella sopra.

Creazione di un completamento automatico locale

La creazione di un completamento automatico locale è quasi identica alla creazione di un completamento automatico Ajax come abbiamo discusso nella sezione precedente.

La differenza principale risiede nel modo in cui il set di dati di supporto da utilizzare per il completamento automatico viene identificato nel controllo.

Con un completamento automatico Ajax, abbiamo fornito l'URL di una risorsa lato server che eseguirà il filtro necessario, dato l'input dell'utente, e restituirà solo gli elementi di dati che corrispondono. Con un autocompletatore locale, forniamo invece l'elenco completo degli elementi di dati, come un array di stringhe JavaScript, e il controllo stesso esegue l'operazione di filtraggio all'interno del proprio codice client.

L'intera sintassi di costruzione è in realtà la seguente:

new Autocompleter.Local(field, container, dataSource [ , options ] );

Il costruttore dell'Autocompleter.Local accetta quattro parametri:

Il nome dell'elemento o il riferimento a un campo di testo che deve essere popolato con una scelta di dati.
Il nome dell'elemento o il riferimento a un elemento <div> da utilizzare come menu di scelte da parte del controllo
Per il terzo parametro, invece di un URL come con l'auto-completer assistito dal server, forniamo un piccolo array String, che contiene tutti i valori possibili.
Le solite opzioni hash.

Opzioni

È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto Autocompleter.Local.

Suor n	Opzione e descrizione
1	Choices Il numero di scelte da visualizzare. Il valore predefinito è 10.
2	partialSearch Abilita la corrispondenza all'inizio delle parole incorporate nelle stringhe di completamento. Il valore predefinito è vero.
3	fullSearch Abilita la corrispondenza ovunque all'interno delle stringhe di completamento. Il valore predefinito è false.
4	partialChars Definisce il numero di caratteri che devono essere digitati prima di tentare una corrispondenza parziale. Il valore predefinito è 2.
5	ignoreCase Ignora maiuscole e minuscole durante la corrispondenza. Il valore predefinito è vero.

Esempio

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Autocompleter.Local(
               'autoCompleteTextField',
               'autoCompleteMenu',
               ['abcdef','abcdeg','xyzabcefg', 'tybabdefg','acdefg'],
               {ignoreCase:false}
            );
         }
      </script>
   </head>

   <body>
      <p>Type something in this box and then select suggested option from the list </p>
		
      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>		
   </body>
</html>

Quando viene visualizzato e dopo aver digitato il carattere "a" nella casella di testo, vengono visualizzate tutte le opzioni di corrispondenza.

Usa il nostro compilatore online per una migliore comprensione del codice con diverse opzioni discusse nella tabella sopra.

Questo produrrà il seguente risultato:

L'editing sul posto è uno dei tratti distintivi delle applicazioni in stile Web 2.0.

La modifica sul posto consiste nel prendere contenuto non modificabile, come <p>, <h1> o <div>, e consentire all'utente di modificarne il contenuto semplicemente facendo clic su di esso.

Questo trasforma l'elemento statico in una zona modificabile (singola o multilinea) e vengono visualizzati i pulsanti di invio e annullamento (o collegamenti, a seconda delle opzioni) per consentire all'utente di eseguire il commit o il rollback della modifica.

Quindi sincronizza la modifica sul lato server tramite Ajax e rende nuovamente l'elemento non modificabile.

Per utilizzare le capacità di modifica sul posto di script.aculo.us, dovrai caricare i moduli controls.js ed effects.js insieme al modulo prototype.js. Quindi, il caricamento minimo per script.aculo.us sarà simile a questo:

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>

Creazione di un editor di testo sul posto

L'intera sintassi di costruzione è la seguente:

new Ajax.InPlaceEditor(element, url [ , options ] )

Il costruttore per Ajax.InPlaceEditor accetta tre parametri:

L'elemento di destinazione può essere un riferimento all'elemento stesso o l'id dell'elemento di destinazione.
Il secondo parametro di Ajax.InPlaceEditor specifica l'URL di uno script lato server che viene contattato quando un valore modificato viene completato.
Le solite opzioni hash.

Opzioni

È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto Ajax.InPlaceEditor.

Suor n	Opzione e descrizione
1	okButton Un valore booleano che indica se deve essere visualizzato o meno un pulsante "ok". Il valore predefinito è vero.
2	okText Il testo da posizionare sul pulsante ok. Il valore predefinito è "ok".
3	cancelLink Un valore booleano che indica se deve essere visualizzato un collegamento di annullamento. Il valore predefinito è vero.
4	cancelText Il testo del link di annullamento. Il valore predefinito è "annulla".
5	savingText Una stringa di testo visualizzata come valore del controllo durante l'elaborazione dell'operazione di salvataggio (la richiesta avviata facendo clic sul pulsante ok). Il valore predefinito è "Salvataggio".
6	clickToEditText La stringa di testo che appare come "descrizione comando" di controllo al passaggio del mouse.
7	rows Il numero di righe da visualizzare quando il controllo di modifica è attivo. Qualsiasi numero maggiore di 1 fa sì che venga utilizzato un elemento dell'area di testo anziché un elemento del campo di testo. Il valore predefinito è 1.
8	cols Il numero di colonne in modalità attiva. Se omesso, non viene imposto alcun limite di colonna.
9	size Uguale a cols ma si applica solo quando le righe sono 1.
10	highlightcolor Il colore da applicare allo sfondo dell'elemento di testo al passaggio del mouse. L'impostazione predefinita è un giallo pallido.
11	highlightendcolor Il colore a cui sfuma il colore di evidenziazione come effetto. Note - il supporto sembra essere imprevedibile in alcuni browser.
12	loadingText Il testo da visualizzare all'interno del controllo durante un'operazione di caricamento. L'impostazione predefinita è "Caricamento".
13	loadTextURL Specifica l'URL di una risorsa lato server da contattare per caricare il valore iniziale dell'editor quando entra in modalità attiva. Per impostazione predefinita, non viene eseguita alcuna operazione di caricamento del backend e il valore iniziale è il testo dell'elemento di destinazione.
14	externalControl Un elemento che deve fungere da "controllo esterno" che attiva il posizionamento dell'editor in una modalità attiva. Ciò è utile se desideri che un altro pulsante o un altro elemento attivi la modifica del controllo.
15	ajaxOptions Un oggetto hash che verrà passato all'oggetto Ajax Prototype sottostante da utilizzare come hash delle opzioni.

Opzioni di richiamata

Inoltre, è possibile utilizzare una delle seguenti funzioni di callback nel parametro options

Suor n	Descrizione della funzione
1	onComplete Una funzione JavaScript che viene chiamata dopo il completamento con successo della richiesta di salvataggio. L'impostazione predefinita applica un effetto di evidenziazione all'editor.
2	onFailure Una funzione JavaScript che viene chiamata in caso di errore della richiesta di salvataggio. L'impostazione predefinita emette un avviso che mostra il messaggio di errore.
3	callback Una funzione JavaScript che viene chiamata appena prima di inviare la richiesta di salvataggio per ottenere la stringa di query da inviare alla richiesta. La funzione predefinita restituisce una stringa di query che equipara il parametro di query "valore" al valore nel controllo di testo.

Opzioni di stile CSS e ID DOM

Puoi anche utilizzare una delle seguenti opzioni per controllare il comportamento dell'editor sul posto:

Suor n	Opzione e descrizione
1	savingClassName Il nome della classe CSS applicato all'elemento mentre l'operazione di salvataggio è in corso. Questa classe viene applicata quando viene effettuata la richiesta all'URL di salvataggio e viene rimossa quando viene restituita la risposta. Il valore predefinito è "inplaceeditor-saving".
2	formClassName Il nome della classe CSS applicato al modulo creato per contenere l'elemento dell'editor. Il valore predefinito è "inplaceeditor-form".
3	formId L'id applicato al modulo creato per contenere l'elemento dell'editor.

Esempio

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind'
               }
            );
         }
      </script>
   </head>
   
   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>

      <div id = "theElement">
         Click me!
      </div>		
   </body>
</html>

Quando viene visualizzato, fare clic su e modificare il testo. Questo script PHP piuttosto banale converte il valore di un parametro di query con la chiave "valore" nel suo equivalente in maiuscolo e riscrive il risultato nella risposta.

Ecco il contenuto dello script transform.php.

<?php
   if( isset($_REQUEST["value"]) ) { $str = $_REQUEST["value"]; $str = strtoupper($str); echo "$str";
   }
?>

Questo produrrà il seguente risultato:

Le opzioni dell'editor della raccolta sul posto

C'è un altro oggetto chiamato Ajax.InPlaceCollectionEditor, che supporta la modifica sul posto e ti dà la possibilità di selezionare un valore dalle opzioni fornite.

L'intera sintassi di costruzione è la seguente:

new Ajax.InPlaceCollectionEditor(element, url [ , options ] )

Il costruttore di Ajax.InPlaceCollectionEditor accetta tre parametri:

L'elemento di destinazione può essere un riferimento all'elemento stesso o l'id dell'elemento di destinazione
Il secondo parametro di Ajax.InPlaceEditor specifica l'URL di uno script lato server che viene contattato quando un valore modificato viene completato.
Le solite opzioni hash.

Opzioni

A parte l'aggiunta dell'opzione di raccolta, l'elenco di opzioni per l'Editor della raccolta sul posto è un sottoinsieme delle opzioni ereditate dall'Editor di testo sul posto.

Suor n	Opzione e descrizione
1	okButton Un valore booleano che indica se deve essere visualizzato o meno un pulsante "ok". Il valore predefinito è vero.
2	okText Il testo da posizionare sul pulsante ok. Il valore predefinito è "ok".
3	cancelLink Un valore booleano che indica se deve essere visualizzato un collegamento di annullamento. Il valore predefinito è vero.
4	cancelText Il testo del link di annullamento. Il valore predefinito è "annulla".
5	savingText Una stringa di testo visualizzata come valore del controllo durante l'elaborazione dell'operazione di salvataggio (la richiesta avviata facendo clic sul pulsante ok). Il valore predefinito è "Salvataggio".
6	clickToEditText La stringa di testo che appare come "descrizione comando" di controllo al passaggio del mouse.
7	Highlightcolor Il colore da applicare allo sfondo dell'elemento di testo al passaggio del mouse. L'impostazione predefinita è un giallo pallido.
8	Highlightendcolor Il colore a cui sfuma il colore di evidenziazione come effetto. Note - il supporto sembra essere imprevedibile in alcuni browser.
9	Collection Un array di elementi che devono essere utilizzati per popolare le opzioni dell'elemento di selezione.
10	loadTextUrl Specifica l'URL di una risorsa lato server da contattare per caricare il valore iniziale dell'editor quando entra in modalità attiva. Per impostazione predefinita, non viene eseguita alcuna operazione di caricamento del backend e il valore iniziale è il testo dell'elemento di destinazione. Affinché questa opzione sia significativa, deve restituire uno degli elementi forniti nell'opzione di raccolta da impostare come valore iniziale dell'elemento di selezione.
11	externalControl Un elemento che deve fungere da "controllo esterno" che fa scattare la messa in modalità attiva dell'editor. Ciò è utile se desideri che un altro pulsante o un altro elemento attivi la modifica del controllo.
12	ajaxOptions Un oggetto hash che verrà passato all'oggetto Ajax Prototype sottostante da utilizzare come hash delle opzioni.

Opzioni di richiamata

Inoltre, puoi utilizzare una delle seguenti funzioni di callback nel parametro delle opzioni:

Suor n	Descrizione della funzione
1	onComplete Una funzione JavaScript che viene chiamata dopo il completamento con successo della richiesta di salvataggio. L'impostazione predefinita applica un effetto di evidenziazione all'editor.
2	onFailure Una funzione JavaScript che viene chiamata in caso di errore della richiesta di salvataggio. L'impostazione predefinita emette un avviso che mostra il messaggio di errore.

Opzioni di stile CSS e ID DOM

Puoi anche utilizzare una delle seguenti opzioni per controllare il comportamento dell'editor sul posto:

Suor n	Opzione e descrizione
1	savingClassName Il nome della classe CSS applicato all'elemento mentre l'operazione di salvataggio è in corso. Questa classe viene applicata quando viene effettuata la richiesta all'URL di salvataggio e viene rimossa quando viene restituita la risposta. Il valore predefinito è "inplaceeditor-saving".
2	formClassName Il nome della classe CSS applicato al modulo creato per contenere l'elemento dell'editor. Il valore predefinito è "inplaceeditor-form".
3	formId L'id applicato al modulo creato per contenere l'elemento dell'editor.

Esempio

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceCollectionEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind',
                  collection: ['one','two','three','four','five']
               }
            );
         }
      </script>
   </head>
   
   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>
		
      <div id = "theElement">
         Click me!
      </div>
   </body>
</html>

Ecco il contenuto dello script transform.php.

<?php
   if( isset($_REQUEST["value"]) ) { $str = $_REQUEST["value"]; $str = strtoupper($str); echo "$str";
   }
?>

Quando viene visualizzato, fare clic su e selezionare una delle opzioni visualizzate. Questo script PHP piuttosto banale converte il valore del parametro query con la chiave "valore" nel suo equivalente in maiuscolo e riscrive il risultato nella risposta.

Usa il nostro compilatore online per una migliore comprensione del codice con diverse opzioni discusse nella tabella sopra.

Questo produrrà il seguente risultato: