script.aculo.us - Modifica sul posto

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 funzionalità di modifica sul posto di script.aculo.us, è necessario caricare i moduli controls.js e 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 viene completato un valore modificato.
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 in cui il colore di evidenziazione sfuma 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 si desidera 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 è in corso l'operazione di salvataggio. 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 l'editing sul posto e ti dà la possibilità di selezionare un valore dalle opzioni date.

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 viene completato un valore modificato.
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 in cui il colore di evidenziazione sfuma 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 si desidera 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, è possibile 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 è in corso l'operazione di salvataggio. 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";
   }
?>

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 della query con la chiave "valore" nel suo equivalente in maiuscolo e scrive 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: