script.aculo.us - Edição no local

A edição no local é uma das marcas registradas dos aplicativos do estilo Web 2.0.

A edição local consiste em pegar conteúdo não editável, como <p>, <h1> ou <div>, e permitir que o usuário edite seu conteúdo simplesmente clicando nele.

Isso transforma o elemento estático em uma zona editável (linha única ou multilinha) e exibe botões de envio e cancelamento (ou links, dependendo de suas opções) para o usuário confirmar ou reverter a modificação.

Ele então sincroniza a edição no lado do servidor por meio do Ajax e torna o elemento não editável novamente.

Para usar os recursos de edição no local do script.aculo.us, você precisará carregar os módulos controls.js e effects.js junto com o módulo prototype.js. Portanto, seu carregamento mínimo para script.aculo.us será semelhante a este -

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

Criação de um editor de texto no local

Toda a sintaxe de construção é a seguinte -

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

O construtor do Ajax.InPlaceEditor aceita três parâmetros -

• O elemento de destino pode ser uma referência ao próprio elemento ou a id do elemento de destino.

• O segundo parâmetro para o Ajax.InPlaceEditor especifica a URL de um script do lado do servidor que é contatado quando um valor editado é concluído.

• As opções habituais de hash.

Opções

Você pode usar uma ou mais das seguintes opções ao criar seu objeto Ajax.InPlaceEditor.

Sr. Não	Opção e descrição
1	okButton Um valor booleano que indica se um botão "ok" deve ser mostrado ou não. O padrão é verdadeiro.
2	okText O texto a ser colocado no botão ok. O padrão é "ok".
3	cancelLink Um valor booleano que indica se um link de cancelamento deve ser exibido. O padrão é verdadeiro.
4	cancelText O texto do link de cancelamento. O padrão é "cancelar".
5	savingText Uma string de texto exibida como o valor do controle enquanto a operação de salvamento (a solicitação iniciada clicando no botão ok) está em processamento. O padrão é "Salvar".
6	clickToEditText A string de texto que aparece como a "dica de ferramenta" do controle ao passar o mouse.
7	rows O número de linhas a serem exibidas quando o controle de edição está ativo. Qualquer número maior que 1 faz com que um elemento de área de texto seja usado em vez de um elemento de campo de texto. O padrão é 1.
8	cols O número de colunas no modo ativo. Se omitido, nenhum limite de coluna é imposto.
9	size O mesmo que cols, mas só se aplica quando as linhas são 1.
10	highlightcolor A cor a ser aplicada ao plano de fundo do elemento de texto ao passar o mouse. O padrão é amarelo claro.
11	highlightendcolor A cor para a qual a cor de destaque desaparece como um efeito. Note - o suporte parece irregular em alguns navegadores.
12	loadingText O texto que aparecerá dentro do controle durante uma operação de carregamento. O padrão é "Carregando".
13	loadTextURL Especifica a URL de um recurso do lado do servidor a ser contatado para carregar o valor inicial do editor quando ele entrar no modo ativo. Por padrão, nenhuma operação de carregamento de backend ocorre e o valor inicial é o texto do elemento de destino.
14	externalControl Um elemento que serve como um "controle externo" que aciona a colocação do editor em um modo ativo. Isso é útil se você quiser que outro botão ou outro elemento acione a edição do controle.
15	ajaxOptions Um objeto hash que será passado para o objeto Prototype Ajax subjacente para usar como hash de opções.

Opções de retorno de chamada

Além disso, você pode usar qualquer uma das seguintes funções de retorno de chamada no parâmetro de opções

Sr. Não	Descrição da função
1	onComplete Uma função JavaScript que é chamada após a conclusão bem-sucedida da solicitação de salvamento. O padrão aplica um efeito de realce ao editor.
2	onFailure Uma função JavaScript que é chamada em caso de falha da solicitação de salvamento. O padrão emite um alerta mostrando a mensagem de falha.
3	callback Uma função JavaScript que é chamada antes de enviar a solicitação de salvamento para obter a string de consulta a ser enviada à solicitação. A função padrão retorna uma string de consulta igualando o parâmetro de consulta "valor" ao valor no controle de texto.

Opções de estilo CSS e id de DOM

Você também pode usar uma das seguintes opções para controlar o comportamento do editor no local -

Sr. Não	Opção e descrição
1	savingClassName O nome da classe CSS aplicado ao elemento enquanto a operação de salvamento está em andamento. Esta classe é aplicada quando é feita a solicitação do URL de salvamento e removida quando a resposta é retornada. O valor padrão é "inplaceeditor-saving".
2	formClassName O nome da classe CSS aplicado ao formulário criado para conter o elemento editor. O padrão é "inplaceeditor-form".
3	formId O id aplicado ao formulário criado para conter o elemento editor.

Exemplo

<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 exibido, clique e edite o texto. Esse script PHP bastante trivial converte o valor de um parâmetro de consulta com a chave "valor" em seu equivalente em maiúsculas e grava o resultado de volta na resposta.

Aqui está o conteúdo do script transform.php.

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

Isso produzirá o seguinte resultado -

As opções do editor de coleção local

Há mais um objeto chamado Ajax.InPlaceCollectionEditor, que oferece suporte à edição no local e oferece a opção de selecionar um valor entre as opções fornecidas.

Toda a sintaxe de construção é a seguinte -

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

O construtor do Ajax.InPlaceCollectionEditor aceita três parâmetros:

• O elemento de destino pode ser uma referência ao próprio elemento ou a id do elemento de destino

• O segundo parâmetro para o Ajax.InPlaceEditor especifica a URL de um script do lado do servidor que é contatado quando um valor editado é concluído.

• As opções habituais de hash.

Opções

Além da adição da opção de coleção, a lista de opções para o Editor de coleção no local é um subconjunto das opções herdadas do Editor de texto no local.

Sr. Não	Opção e descrição
1	okButton Um valor booleano que indica se um botão "ok" deve ser mostrado ou não. O padrão é verdadeiro.
2	okText O texto a ser colocado no botão ok. O padrão é "ok".
3	cancelLink Um valor booleano que indica se um link de cancelamento deve ser exibido. O padrão é verdadeiro.
4	cancelText O texto do link de cancelamento. O padrão é "cancelar".
5	savingText Uma string de texto exibida como o valor do controle enquanto a operação de salvamento (a solicitação iniciada clicando no botão ok) está em processamento. O padrão é "Salvar".
6	clickToEditText A string de texto que aparece como a "dica de ferramenta" do controle ao passar o mouse.
7	Highlightcolor A cor a ser aplicada ao plano de fundo do elemento de texto ao passar o mouse. O padrão é amarelo claro.
8	Highlightendcolor A cor para a qual a cor de destaque desaparece como um efeito. Note - o suporte parece irregular em alguns navegadores.
9	Collection Uma matriz de itens que devem ser usados ​​para preencher as opções do elemento selecionado.
10	loadTextUrl Especifica a URL de um recurso do lado do servidor a ser contatado para carregar o valor inicial do editor quando ele entrar no modo ativo. Por padrão, nenhuma operação de carregamento de backend ocorre e o valor inicial é o texto do elemento de destino. Para que essa opção seja significativa, ela deve retornar um dos itens fornecidos na opção de coleção a ser definido como o valor inicial do elemento selecionado.
11	externalControl Um elemento que serve como um "controle externo" que aciona a colocação do editor no modo ativo. Isso é útil se você quiser que outro botão ou outro elemento acione a edição do controle.
12	ajaxOptions Um objeto hash que será passado para o objeto Prototype Ajax subjacente para usar como hash de opções.

Opções de retorno de chamada

Além disso, você pode usar qualquer uma das seguintes funções de retorno de chamada no parâmetro de opções -

Sr. Não	Descrição da função
1	onComplete Uma função JavaScript que é chamada após a conclusão bem-sucedida da solicitação de salvamento. O padrão aplica um efeito de realce ao editor.
2	onFailure Uma função JavaScript que é chamada em caso de falha da solicitação de salvamento. O padrão emite um alerta mostrando a mensagem de falha.

Opções de estilo CSS e id de DOM

Você também pode usar uma das seguintes opções para controlar o comportamento do editor no local -

Sr. Não	Opção e descrição
1	savingClassName O nome da classe CSS aplicado ao elemento enquanto a operação de salvamento está em andamento. Esta classe é aplicada quando é feita a solicitação do URL de salvamento e removida quando a resposta é retornada. O valor padrão é "inplaceeditor-saving".
2	formClassName O nome da classe CSS aplicado ao formulário criado para conter o elemento editor. O padrão é "inplaceeditor-form".
3	formId O id aplicado ao formulário criado para conter o elemento editor.

Exemplo

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

Aqui está o conteúdo do script transform.php.

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

Aqui está o conteúdo do script transform.php.

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

Quando exibido, clique e selecione uma das opções exibidas. Esse script PHP bastante trivial converte o valor do parâmetro de consulta com a chave "valor" em seu equivalente em maiúsculas e grava o resultado de volta na resposta.

Use nosso compilador online para uma melhor compreensão do código com as diferentes opções discutidas na tabela acima.

Isso produzirá o seguinte resultado -