script.aculo.us - Guia rápido
O que é script.aculo.us?
script.aculo.us é uma biblioteca JavaScript construída sobre o Prototype JavaScript Framework, aprimorando a GUI e fornecendo experiência Web 2.0 aos usuários da web.
script.aculo.us foi desenvolvido por Thomas Fuchs e foi lançado ao público pela primeira vez em junho de 2005.
script.aculo.us fornece efeitos visuais dinâmicos e elementos de interface do usuário por meio do Document Object Model (DOM).
O Prototype JavaScript Framework é um framework JavaScript criado por Sam Stephenson que fornece um framework Ajax e outros utilitários.
Como instalar o script.aculo.us?
É muito simples instalar a biblioteca script.aculo.us. Ele pode ser configurado em três etapas simples -
Vá para a página de download para baixar a versão mais recente em um pacote conveniente.
Descompacte o pacote baixado e você encontrará as seguintes pastas -
lib - contém o arquivo prototype.js.
src - contém os seguintes 8 arquivos -
- builder.js
- controls.js
- dragdrop.js
- effects.js
- scriptaculous.js
- slider.js
- sound.js
- unittest.js
test - contém arquivos para fins de teste.
CHANGELOG - Arquivo que contém o histórico de todas as alterações.
MIT-LICENSE - Arquivo que descreve os termos de licenciamento.
README - Arquivo que descreve o pacote de instalação, incluindo as instruções de instalação.
Agora coloque os seguintes arquivos em um diretório do seu site, por exemplo, / javascript.
- builder.js
- controls.js
- dragdrop.js
- effects.js
- scriptaculous.js
- slider.js
- prototype.js
NOTE - Os arquivos sound.js e unittest.js são opcionais
Como usar a biblioteca script.aculo.us?
Agora você pode incluir o script script.aculo.us da seguinte maneira -
<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>Por padrão, scriptaculous.js carrega todos os outros arquivos JavaScript necessários para efeitos, arrastar e soltar, controles deslizantes e todos os outros recursos de script.aculo.us.
Se você não precisa de todos os recursos, pode limitar os scripts adicionais que são carregados especificando-os em uma lista separada por vírgulas, por exemplo -
<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>Os scripts que podem ser especificados são -
- effects
- dragdrop
- builder
- controls
- slider
NOTE - Alguns dos scripts requerem que outros sejam carregados para funcionar corretamente.
Como chamar uma função de biblioteca script.aculo.us?
Para chamar uma função de biblioteca script.aculo.us, use tags de script HTML como mostrado abaixo -
<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>Aqui, estamos usando o módulo Effect e aplicando o efeito Highlight em um elemento.
Isso produzirá o seguinte resultado -
Outra maneira fácil de chamar a função de qualquer módulo é dentro dos manipuladores de eventos da seguinte maneira -
<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>Isso produzirá o seguinte resultado -
script.aculo.us é dividido em módulos, cada um com seu próprio arquivo JavaScript. Esses módulos são explicados aqui -
Efeitos
O módulo de efeitos vem com mais de vinte e cinco efeitos visuais e sete modos de transição.
Arrastar e soltar
Você usará o módulo arrastar e soltar para tornar qualquer elemento arrastável , transformá-lo em uma zona para soltar ou até mesmo fazer uma série inteira de elementos classificáveis para que você possa reorganizá-los arrastando e soltando.
Sliders
Um controle deslizante é uma espécie de pequeno trilho ou trilho, ao longo do qual você pode deslizar uma alça. Isso se traduz em um valor numérico. Com script.aculo.us, você pode criar esses controles deslizantes com muito controle.
Preenchimento Automático
Os controles do preenchimento automático permitem o estilo Google-Suggest, campos de entrada de texto com preenchimento automático local e baseado em servidor.
Edição no local
Você pode tornar qualquer texto ou coleção de itens editáveis no local, simplesmente clicando nele.
Construtor
Um auxiliar para construir fragmentos DOM em JavaScript. Esta é uma ferramenta de desenvolvedor que facilita consideravelmente a criação de DOM.
Som
A versão 1.7.1 introduziu um sistema de som que permite reproduzir sons facilmente, colocá-los em fila, usar várias faixas e assim por diante.
Os efeitos script.aculo.us são divididos em dois grupos -
Efeitos Principais
Os seis efeitos principais a seguir são a base da biblioteca JavaScript de efeitos visuais script.aculo.us.
Effect.Opacity
Effect.Scale
Effect.Morph
Effect.Move
Effect.Highlight
Effect.Parallel
Todos os efeitos principais suportam vários parâmetros comuns, bem como parâmetros específicos de efeitos e esses nomes de efeito diferenciam maiúsculas de minúsculas.
Todos os parâmetros comuns específicos do efeito foram discutidos neste tutorial junto com os efeitos.
Efeitos de combinação
Todos os efeitos de combinação são baseados nos cinco efeitos principais e são considerados exemplos para permitir que você escreva seus próprios efeitos.
Normalmente, esses efeitos dependem da execução paralela e sincronizada de outros efeitos. Tal execução está prontamente disponível, portanto, criar seus próprios efeitos combinados é muito fácil. Aqui está uma lista de efeitos de combinação -
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
Além disso, há o Effect.toggle método utilitário para elementos que você deseja mostrar temporariamente com uma animação Aparecer / Desvanecer, Deslizar ou Cega.
Effect.toggle
Arquivos de biblioteca necessários para efeitos
Para usar os recursos de efeito de script.aculo.us, você precisará carregar o módulo de efeitos. Portanto, seu carregamento mínimo para script.aculo.us será semelhante a este:
<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>Funções de efeito de chamada
A maneira correta de iniciar um efeito central é geralmente com o newoperador. Dependendo de suas preferências, você pode usar uma das duas sintaxes -
Sintaxe
new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])Essas duas sintaxes são tecnicamente equivalentes. A escolha entre os dois é principalmente sobre seu senso pessoal de estética do código.
Exemplo
Aqui estão duas chamadas equivalentes, para que você possa ver como as sintaxes estão relacionadas, que são muito intercambiáveis -
new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });O recurso mais popular da interface da Web 2.0 é o recurso de arrastar e soltar. Felizmente, o script.aculo.us vem com uma capacidade inerente para suportar arrastar e soltar.
Para usar os recursos de arrastar de script.aculo.us, você precisará carregar o dragdrop módulo, que também requer o effectsmódulo. Portanto, seu carregamento mínimo para script.aculo.us ficará assim:
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>Arrastando coisas
É muito simples tornar um item arrastável usando script.aculo.us. Isso requer a criação de uma instância da classe Draggable e a identificação do elemento a ser arrastado.
Sintaxe arrastável
new Draggable( element, options );O primeiro parâmetro para o construtor identifica o elemento a ser arrastado como o id do elemento ou uma referência ao elemento. O segundo parâmetro especifica informações opcionais sobre como o elemento arrastável deve se comportar.
Opções arrastáveis
Você pode usar uma ou mais das seguintes opções ao criar seu objeto arrastável.
| Opção | Descrição | Exemplos |
|---|---|---|
| reverter | Se definido como verdadeiro , o elemento retorna à sua posição original quando o arrasto termina. Também especifica se o retorno de chamada de efeito reverso será invocado quando a operação de arrastar parar. O padrão é falso . | Exemplo |
| estalo | Usado para fazer com que um objeto arrastável se encaixe em uma grade ou para restringir seu movimento. Se false (padrão), não ocorre ajuste ou restrição.
|
Exemplo |
| zindex | Especifica o índice z CSS a ser aplicado ao elemento durante uma operação de arrastar. Por padrão, o índice z do elemento é definido como 1000 ao arrastar. | Exemplo |
| fantasma | Booleano determinando se o arrastável deve ser clonado para arrastar, deixando o original no lugar até que o clone seja solto. O padrão é falso . | Exemplo |
| restrição | Uma string usada para limitar as direções arrastáveis, horizontal ou vertical . O padrão é nulo, o que significa movimento livre. | Exemplo |
| lidar com | Especifica um elemento a ser usado como alça para iniciar a operação de arrastar. Por padrão, um elemento é seu próprio identificador. | Exemplo |
| efeito estelar | Um efeito chamado no elemento ao iniciar o arrastamento. Por padrão, ele altera a opacidade do elemento para 0,2 em 0,2 segundos. | Exemplo |
| efeito reverso | Um efeito chamado no elemento quando o arrasto é revertido. O padrão é um deslizamento suave para a posição original do elemento. Chamado somente se a reversão for verdadeira. | Exemplo |
| efeito final | Um efeito chamado no elemento ao arrastar termina. Por padrão, ele altera a opacidade do elemento para 1,0 em 0,2 segundos. | Exemplo |
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 -
| Função | Descrição | Exemplos |
|---|---|---|
| onStart | Chamado quando um arrasto é iniciado. | Exemplo |
| onDrag | Chamado repetidamente quando um mouse se move, se a posição do mouse mudar em relação à chamada anterior. | Exemplo |
| mudança | Chamado apenas como onDrag (que é o retorno de chamada preferido). | Exemplo |
| No fim | Chamado quando um arrasto é encerrado. | Exemplo |
Exceto para o retorno de chamada "alterar", cada um desses retornos de chamada aceita dois parâmetros: o objeto arrastável e o objeto de evento do mouse.
Exemplo arrastável
Aqui, definimos 5 elementos que podem ser arrastados: três elementos <div>, um elemento <img> e um elemento <span>. O objetivo dos três elementos <div> diferentes é demonstrar que, independentemente de um elemento começar com uma regra de posicionamento estático (o padrão), relativo ou absoluto, o comportamento de arrastar não é afetado.
<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>Isso produzirá o seguinte resultado -
Soltando Coisas Arrastadas
Um elemento é convertido em um destino de soltar por meio de uma chamada ao método add () em um namespace chamado Droppables .
O namespace Droppables tem dois métodos importantes: add () para criar um alvo de soltar e remove () para remover um alvo de soltar.
Sintaxe
Aqui está a sintaxe do método add () para criar um destino de soltar. O método add () cria um destino de eliminação do elemento passado como seu primeiro parâmetro, usando as opções no hash passado como o segundo.
Droppables.add( element, options );A sintaxe para remove () é ainda mais simples. O método remove () remove o comportamento de destino de soltar do elemento passado.
Droppables.remove(element);Opções
Você pode usar uma ou mais das seguintes opções ao criar seu objeto arrastável.
| Opção | Descrição | Exemplos |
|---|---|---|
| Hoverclass | O nome de uma classe CSS que será adicionada ao elemento enquanto o droppable estiver ativo (tem um arrastável aceitável pairando sobre ele). O padrão é nulo. | Exemplo |
| Aceitar | Uma string ou uma matriz de strings que descreve as classes CSS. O droppable só aceitará arrastáveis que tenham uma ou mais dessas classes CSS. | Exemplo |
| Contenção | Especifica um elemento, ou matriz de elementos, que deve ser pai de um item arrastável para ser aceito pelo destino de soltar. Por padrão, nenhuma restrição de contenção é aplicada. | Exemplo |
| Sobreposição | Se definido como 'horizontal' ou 'vertical', o droppable só reagirá a um Draggable se estiver sobreposto em mais de 50% na direção dada. Usado por classificáveis, discutido no próximo capítulo. | |
| ávido | Se verdadeiro (padrão), ele para de pairar sobre outros droppables, sob o draggable não será pesquisado. | Exemplo |
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 -
| Função | Descrição | Exemplos |
|---|---|---|
| onHover | Especifica uma função de retorno de chamada que é ativada quando um item arrastável adequado passa sobre o destino de soltar. Usado por classificáveis, discutido no próximo capítulo. | |
| onDrop | Especifica uma função de retorno de chamada que é chamada quando um elemento arrastável adequado é solto no destino de soltar. | Exemplo |
Exemplo
Aqui, a primeira parte deste exemplo é semelhante ao nosso exemplo anterior, exceto que usamos a função $ A () útil do Prototype para converter uma lista de nós de todos os elementos <img> no elemento com o id de draggables para um 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>Isso produzirá o seguinte resultado -
Muitas vezes, você precisa fornecer ao usuário a capacidade de reordenar os elementos (como itens em uma lista) arrastando-os.
Sem arrastar e soltar, reordenação pode ser um pesadelo, mas script.aculo.us fornece estendida reordenação apoio fora da caixa através do Ordenável classe. O elemento que se torna Sortable é passado para o método create () no namespace Sortable.
Um Classificável consiste em elementos de item em um elemento de contêiner. Quando você cria um novo Classificável, ele se encarrega da criação dos arrastáveis e soltáveis correspondentes .
Para usar os recursos Classificáveis de script.aculo.us, você precisará carregar o dragdrop módulo, que também requer o effectsmódulo. 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,dragdrop"></script>Sintaxe classificável
Aqui está a sintaxe do método create () para criar um item classificável. O método create () pega o id de um elemento de contêiner e os classifica com base nas opções passadas.
Sortable.create('id_of_container',[options]);Use Sortable.destroy para remover completamente todos os manipuladores de eventos e referências a um Sortable criado por Sortable.create.
NOTE- Uma chamada para Sortable.create, implicitamente chama Sortable.destroy se o elemento referenciado já era um Sortable. Aqui está a sintaxe simples para chamar a função de destruição.
Sortable.destroy( element );Opções classificáveis
Você pode usar uma ou mais das seguintes opções ao criar seu objeto Classificável.
| Sr. Não | Opção e descrição |
|---|---|
| 1 | tag Especifica o tipo dos elementos dentro do contêiner classificável que devem ser classificáveis por meio de arrastar e soltar. O padrão é 'li'. |
| 2 | only Especifica um nome de classe CSS, ou matriz de nomes de classe, que um item arrastável deve possuir para ser aceito pelo destino de soltar. Isso é semelhante à opção de aceitar arrastável. Por padrão, nenhuma restrição de nome de classe é aplicada. |
| 3 | overlap Um de falso, horizontal ou vertical . Controla o ponto em que um reordenamento é acionado. O padrão é vertical . |
| 4 | constraint Um de falso, horizontal ou vertical . Limita o movimento de elementos classificáveis arrastados. O padrão é vertical . |
| 5 | containment Permite arrastar e soltar entre classificáveis. Pega uma matriz de elementos ou ids de elemento. Observação importante: para garantir que seja possível arrastar nos dois sentidos entre os contêineres, coloque todas as chamadas Sortable.create após os elementos do contêiner. |
| 6 | handle O mesmo que a opção Arrastável de mesmo nome, especificando um elemento a ser usado para iniciar as operações de arrastar. Por padrão, cada elemento é seu próprio identificador. |
| 7 | hoverclass Especifica um nome de classe CSS a ser aplicado a elementos classificáveis não arrastados conforme um elemento arrastado passa sobre eles. Por padrão, nenhum nome de classe CSS é aplicado. |
| 8 | ghosting Semelhante à opção Arrastável de mesmo nome, se verdadeiro, esta opção faz com que o elemento original de uma operação de arrastar permaneça no lugar enquanto uma cópia semitransparente do elemento é movida junto com o ponteiro do mouse. O padrão é falso . Esta opção não funciona com o IE. |
| 9 | dropOnEmpty Se verdadeiro, permite que elementos classificáveis sejam colocados em uma lista vazia. O padrão é falso . |
| 10 | scroll Se o contêiner classificável possuir uma barra de rolagem devido à configuração do atributo overflow CSS, esta opção habilita a rolagem automática da lista além dos elementos visíveis. O padrão é falso . |
| 12 | scrollSensitivity Quando a rolagem está ativada, ela ajusta o ponto em que a rolagem é acionada. O padrão é 20. |
| 13 | scrollSpeed Quando a rolagem está ativada, ela ajusta a velocidade de rolagem. O padrão é 15. |
| 14 | tree Se verdadeiro, permite classificar com subelementos dentro do elemento classificável. O padrão é falso. |
| 15 | treeTag Se a opção de árvore estiver habilitada, ela especifica o tipo de elemento de contêiner do subelemento cujos filhos participam do comportamento classificável. O padrão é 'ul'. |
Você pode fornecer os seguintes retornos de chamada no parâmetro de opções -
| Sr. Não | Opção e descrição |
|---|---|
| 1 | onChange Uma função que será chamada sempre que a ordem de classificação mudar ao arrastar. Ao arrastar de um Classificável para outro, o retorno de chamada é chamado uma vez em cada Classificável. Obtém o elemento afetado como seu parâmetro. |
| 2 | onUpdate Uma função que será chamada ao término de uma operação de arrastar que resulta em uma mudança na ordem dos elementos. |
Exemplos de classificação
Esta demonstração foi verificada para funcionar no IE 6.0. Também funciona na versão mais recente do 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>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 -
Observe o uso da tag: 'li' . Da mesma forma, você pode classificar a seguinte lista de imagens disponíveis em <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>Isso produzirá o seguinte resultado -
Serializando os Elementos Classificáveis
O objeto Sortable também fornece uma função Sortable.serialize () para serializar o Sortable em um formato adequado para solicitações HTTP GET ou POST. Isso pode ser usado para enviar o pedido do Classificável por meio de uma chamada Ajax.
Sintaxe
Sortable.serialize(element, options);Opções
Você pode usar uma ou mais das seguintes opções ao criar seu objeto Classificável.
| Sr. Não | Opção e descrição |
|---|---|
| 1 | tag Define o tipo de tag que será serializada. Isso será semelhante ao que é usado em Sortable.create . |
| 2 | name Define o nome da chave que será usada para criar os pares de chave / valor para serialização no formato HTTP GET / POST. Portanto, se o nome fosse xyz, a string de consulta seria semelhante a - xyz [] = valor1 & xyz [] = valor2 & xyz [] = valor3 Onde os valores são derivados dos elementos filhos na ordem em que aparecem no contêiner. |
Exemplos de serialização
Neste exemplo, a saída da serialização fornecerá apenas os números após o sublinhado nos IDs de item da lista.
Para tentar, deixe as listas em sua ordem original, pressione o botão para ver a serialização das listas. Agora, reordene alguns elementos e clique no botão novamente.
<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>Isso produzirá o seguinte resultado -
Movendo itens entre classificáveis
O exemplo a seguir mostra como mover itens de uma lista para outra lista.
<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>Observe que a opção de contenção para cada contêiner lista ambos os contêineres como elementos de contenção. Fazendo isso, habilitamos os elementos filhos a serem classificados dentro do contexto de seus pais; Também permite que eles sejam movidos entre os dois contêineres.
Definimos dropOnEmpty como true para ambas as listas. Para ver o efeito que esta opção tem naquela lista, mova todos os elementos de uma lista para outra de forma que uma lista fique vazia. Você descobrirá que está permitindo soltar um elemento na lista vazia.
Isso produzirá o seguinte resultado -
Vinculando a Ajax
Claro, onUpdate é um candidato principal para acionar notificações Ajax para o servidor, por exemplo, quando o usuário reordena uma lista de tarefas ou algum outro conjunto de dados. Combinar Ajax.Request e Sortable.serialize torna a persistência ao vivo simples o suficiente -
<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 cria uma string como: List [] = 1 & List [] = 2 & List [] = 3 & List [] = 4, onde os números são as partes identificadoras dos ids dos elementos da lista após o sublinhado.
Agora precisamos codificar file.php , que analisará os dados postados como parse_str ($ _ POST ['data']); e você pode fazer o que quiser com esses dados classificados.
Para saber mais sobre AJAX, consulte nosso Tutorial simples de Ajax .
Os controles deslizantes são trilhas finas com uma ou mais alças que o usuário pode arrastar ao longo da trilha.
O objetivo de um controle deslizante é fornecer um método de entrada alternativo para definir um valor numérico; o controle deslizante representa um intervalo e deslizar uma alça ao longo da trilha define um valor dentro desse intervalo.
Os controles deslizantes podem estar na orientação horizontal ou vertical. Quando horizontal, a extremidade esquerda da trilha geralmente representa o valor mais baixo, enquanto na orientação vertical, a parte inferior do slide geralmente é o valor mais baixo.
Para usar os recursos de controle deslizante do script.aculo.us, você precisará carregar o módulo slider.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=slider">< /script>Criação de um controle deslizante
Criar um controle deslizante é, como de costume, uma questão de construir um objeto personalizado sobre alguns elementos existentes no DOM da sua página. Você precisará de dois elementos aqui, um para a alça e outro para a pista da seguinte forma -
new Control.Slider(handle, track [ , options ] );O elemento track é geralmente um <div>, e o elemento handle é um <div> ou <span> dentro do elemento track. Ambos podem ser passados por id = ou por referências diretas ao DOM, como de costume.
Opções de controles deslizantes
Você pode usar uma ou mais das seguintes opções ao criar seu objeto Slider.
| Sr. Não | Opção e descrição |
|---|---|
| 1 | Axis Define a orientação do controle como horizontal ou vertical . A orientação padrão é horizontal . |
| 2 | Range Define o intervalo dos valores do controle deslizante como uma instância de uma instância Prototype ObjectRange. O padrão é 0 a 1. |
| 3 | Values Define o conjunto discreto de valores que o controle deslizante pode adquirir. Se omitido, todos os valores dentro do intervalo podem ser definidos. |
| 4 | sliderValue Define o valor inicial do controle deslizante. Se omitido, o valor representado pela extremidade esquerda (ou superior) do controle deslizante é o valor inicial. |
| 5 | Disabled Se verdadeiro, ele cria um slide que é inicialmente desativado. Obviamente, o padrão é falso. |
| 6 | setValue Irá atualizar o valor do controle deslizante e, assim, mover a alça do controle deslizante para a posição apropriada. |
| 7 | setDisabled Irá definir o controle deslizante para o estado desativado (desativado = verdadeiro). |
| 8 | setEnabled Irá definir o controle deslizante para o estado ativado (desativado = falso). |
Você pode fornecer os seguintes retornos de chamada no parâmetro de opções -
| Sr. Não | Opção e descrição |
|---|---|
| 1 | onSlide Chamado sempre que o Slider é movido arrastando. A função chamada obtém o valor do controle deslizante como seu parâmetro. |
| 2 | onChange Chamado sempre que o Slider termina de se mover ou tem seu valor alterado por meio da função setSlider Value. A função chamada obtém o valor do controle deslizante como seu parâmetro. |
Exemplo de controles deslizantes
<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>Pontos a serem observados -
Você pode alterar a imagem do controle deslizante de qualquer controle deslizante usando CSS. Use as propriedades CSS background-image: url (track.gif) e background-repeat: no-repeat para definir a imagem do controle deslizante.
O valor do intervalo pode ser especificado usando $R(minValue, MaxValue). For example, $R (1,100).
O valor do intervalo pode ser especificado em termos de valores específicos. Por exemplo, valores: [1,25,50,75,100]. Nesse caso, o controle deslizante só alcançaria os valores discretos listados conforme a alça fosse movida.
A qualquer momento, o valor do controle deslizante pode ser definido sob o controle do programa chamando o método setValue () da instância do controle deslizante, como em: sliderInstance.setValue (50);
Isso produzirá o seguinte resultado -
Pronto para uso, script.aculo.us oferece suporte a duas fontes para preenchimento automático -
- Fontes remotas (obtidas através do Ajax),
- Fontes locais (arrays de string nos scripts de sua página da web).
Dependendo da fonte que você está planejando usar, você instanciará Ajax.Autocompleter ou Autocompleter.Local , respectivamente. Embora equipados com opções específicas, esses dois objetos compartilham um grande conjunto de recursos e fornecem uma experiência de usuário uniforme.
Existem quatro coisas que você sempre passará para esses objetos ao construí-los -
O campo de texto que você deseja tornar autocompletável. Como de costume, você pode passar o próprio campo ou o valor de seu atributo id =.
O contêiner para opções de preenchimento automático, que acabará contendo uma <ul> </li> lista de opções para escolher. Novamente, passe o elemento diretamente ou seuid =. Este elemento é geralmente um simples <div>.</p> </li>
A fonte de dados, que será expressa, dependendo do tipo de fonte, como um array JavaScript de strings ou como um URL para a fonte remota.
Finalmente, as opções. Como sempre, eles são fornecidos como uma espécie de hash, e ambos os objetos de preenchimento automático podem se virar sem nenhuma opção personalizada; existem padrões adequados para tudo.
Para usar os recursos de preenchimento automático de 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>Criando um Completador Automático Ajax
A sintaxe de construção é a seguinte -
new Ajax.Autocompleter(element, container, url [ , options ] )O construtor do Ajax.Autocompleter aceita quatro parâmetros -
O nome do elemento ou referência a um campo de texto que deve ser preenchido com uma escolha de dados.
O nome do elemento ou referência a um elemento <div> a ser usado como um menu de opções pelo controle.
A URL do recurso do lado do servidor que fornecerá as opções.
As opções habituais de hash.
Opções
Você pode usar uma ou mais das seguintes opções ao criar seu objeto Ajax.Autocompleter.
| Sr. Não | Opção e descrição |
|---|---|
| 1 | paramName O nome do parâmetro de consulta que contém o conteúdo do campo de texto postado no recurso do lado do servidor. O padrão é o nome do campo de texto. |
| 2 | minChars Número de caracteres que devem ser inseridos antes que uma solicitação de opções do lado do servidor possa ser disparada. O padrão é 1. |
| 3 | Frequency O intervalo, em segundos, entre as verificações internas para ver se uma solicitação para o recurso do lado do servidor deve ser postada. O padrão é 0,4. |
| 4 | Indicator O id ou referência a um elemento a ser exibido enquanto uma solicitação de escolhas do lado do servidor está em andamento. Se omitido, nenhum elemento é revelado. |
| 5 | Parameters Uma string de texto contendo parâmetros de consulta extras a serem passados para o recurso do lado do servidor. |
| 6 | updateElement Uma função de retorno de chamada a ser acionada quando o usuário seleciona uma das opções retornadas do servidor que substitui a função interna que atualiza o campo de texto com o valor escolhido. |
| 7 | afterUpdateElement Uma função de retorno de chamada a ser disparada após a função updateElement ter sido executada. |
| 8 | Tokens Uma única sequência de texto ou matriz de sequências de texto que indicam tokens a serem usados como delimitadores para permitir que vários elementos sejam inseridos no campo de texto, cada um dos quais pode ser preenchido automaticamente individualmente. |
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.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>Agora, precisamos de um servidor para acessar essa página e servir a URL da fonte de dados (serverSideScript.php). Você manterá uma lógica completa para exibir sugestões neste script.
Por exemplo, estamos mantendo um texto HTML simples em serverSideScript.php . Você pode escrever seu script usando CGI, PHP, Ruby ou qualquer outro script do lado do servidor para escolher as sugestões apropriadas e formatá-las na forma de <ul><li>...</li> </ul> e passá-las de volta para o programa do chamador.
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>Isso produzirá o seguinte resultado -
com diferentes opções discutidas na tabela acima.
Criando um Completador Automático Local
A criação de um completador automático local é quase idêntica à criação de um completador automático Ajax, conforme discutimos na seção anterior.
A principal diferença está em como o conjunto de dados de apoio a ser usado para o preenchimento automático é identificado para o controle.
Com um completador automático Ajax, fornecemos a URL de um recurso do lado do servidor que realizaria a filtragem necessária, de acordo com a entrada do usuário, e retornaria apenas os elementos de dados correspondentes. Com um Autocompleter local, fornecemos a lista completa de elementos de dados em vez disso, como uma matriz de String JavaScript, e o próprio controle executa a operação de filtragem em seu próprio código de cliente.
Toda a sintaxe de construção é na verdade a seguinte -
new Autocompleter.Local(field, container, dataSource [ , options ] );O construtor do Autocompleter.Local aceita quatro parâmetros -
O nome do elemento ou referência a um campo de texto que deve ser preenchido com uma escolha de dados.
O nome do elemento ou referência a um elemento <div> a ser usado como um menu de opções pelo controle
Para o terceiro parâmetro, em vez de um URL, como no complemento automático assistido pelo servidor, fornecemos uma pequena matriz String, que contém todos os valores possíveis.
As opções habituais de hash.
Opções
Você pode usar uma ou mais das seguintes opções ao criar seu objeto Autocompleter.Local.
| Sr. Não | Opção e descrição |
|---|---|
| 1 | Choices O número de opções a serem exibidas. O padrão é 10. |
| 2 | partialSearch Ativa a correspondência no início de palavras incorporadas nas strings de conclusão. O padrão é verdadeiro. |
| 3 | fullSearch Ativa a correspondência em qualquer lugar nas strings de conclusão. O padrão é falso. |
| 4 | partialChars Define o número de caracteres que devem ser digitados antes que qualquer correspondência parcial seja tentada. O padrão é 2. |
| 5 | ignoreCase Ignora maiúsculas e minúsculas ao combinar. O padrão é verdadeiro. |
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 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 exibido, e após o caractere 'a' ser digitado na caixa de texto, ele exibe todas as opções correspondentes.
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 -
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";
}
?>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 -