Aplicar comportamentos internos do JavaScript

Usar comportamentos internos

Os comportamentos incluídos no Dreamweaver foram escritos para funcionar em navegadores modernos. Os comportamentos não funcionam em navegadores mais antigos.

Embora as ações do Dreamweaver tenham sido escritas para maximizar a compatibilidade entre navegadores, alguns navegadores não oferecem suporte para JavaScript, e muitas pessoas que navegam na web mantêm o JavaScript desabilitado nos navegadores.Para obter os melhores resultados multiplataforma, forneça interfaces alternativas incluídas em tags <noscript> para que pessoas sem JavaScript possam usar seu site.

Aplicar o comportamento Chamar JavaScript

O comportamento Chamar JavaScript executa uma função personalizada ou linha de código JavaScript quando um evento ocorre. (Você pode escrever o script por conta própria ou pode usar código fornecido por várias bibliotecas JavaScript disponíveis gratuitamente na web.)

Aplicar o comportamento Alterar propriedade

Use o comportamento Alterar propriedade para alterar o Valor de uma das propriedades de um objeto (por exemplo, a cor do Fundo de um div ou a ação de um formulário).

Aplicar o comportamento Verificar plug-in

Use o comportamento Verificar plug-in para enviar visitantes a páginas diferentes, dependendo de terem o plug‑in especificado instalado. Por exemplo, você pode querer que os visitantes vão para uma página se tiverem o Shockwave e para outra página se não tiverem.

Aplicar o comportamento Arrastar elemento AP

O comportamento Drag AP Element permite que o\nvisitante arraste um elemento posicionado absolutamente (AP).Use este comportamento\npara criar quebra-cabeças, controles deslizantes e outros elementos\nde interface móveis.

Você pode especificar em qual direção o visitante\npode arrastar o elemento AP (horizontalmente, verticalmente ou em qualquer direção),\num alvo para o qual o visitante deve arrastar o elemento AP, se\no elemento AP deve se encaixar no alvo quando o elemento AP estiver\na um determinado número de pixels do alvo, o que fazer quando o elemento AP\natingir o alvo e muito mais.

Como o comportamento Drag AP Element\ndeve ser chamado antes que o visitante possa arrastar o elemento AP,\nvocê deve anexar Drag AP Element ao objeto body\n(com o evento onLoad).

Coletar informações sobre o elemento AP arrastável

Quando você anexa o comportamento Arrastar elemento AP a um objeto, Dreamweaver insere a função MM_dragLayer() na seção head do documento. (A função mantém a convenção de nomenclatura antiga para elementos AP [ou seja, "Layer"] para que camadas criadas em versões anteriores do Dreamweaver permaneçam editáveis.) Além de registrar o elemento AP como arrastável, esta função define três propriedades para cada elemento AP arrastável—MM_LEFTRIGHT, MM_UPDOWN, e MM_SNAPPED—que você pode usar em suas próprias funções JavaScript para determinar a posição horizontal relativa do elemento AP, a posição vertical relativa do elemento AP e se o elemento AP atingiu o destino de soltar.

Por exemplo, a seguinte função exibe o valor da propriedade MM_UPDOWN (a posição vertical atual do elemento AP) em um campo de formulário chamado curPosField.(Campos de formulário são úteis para exibir informações atualizadas continuamente porque são dinâmicos—ou seja, é possível alterar o conteúdo após a página terminar de carregar.)

function getPos(layerId){

var layerRef = document.getElementById(layerId);

var curVertPos = layerRef.MM_UPDOWN;

document.tracking.curPosField.value = curVertPos;

}

Em vez de exibir os valores de MM_UPDOWN ou MM_LEFTRIGHT em um campo de formulário, é possível usar esses valores de várias outras maneiras. Por exemplo, é possível gravar uma função que exiba uma mensagem no campo de formulário dependendo de quão próximo o valor está da zona de soltar, ou chamar outra função para mostrar ou ocultar um elemento PA dependendo do valor.

É especialmente útil ler a propriedade MM_SNAPPED quando há vários elementos PA na página, todos devendo chegar aos respectivos destinos antes de o visitante poder avançar para a próxima página ou tarefa. Por exemplo, é possível gravar uma função para contar quantos elementos PA têm o valor MM_SNAPPED de verdadeiro e chamá-la sempre que um elemento PA for solto. Quando a contagem de encaixados chegar ao número desejado, é possível enviar o visitante para a próxima página ou exibir uma mensagem de parabéns.

Aplicar o comportamento Ir para URL

O comportamento Ir para URL abre uma nova página na janela atual ou no quadro especificado. Esse comportamento é útil para alterar o conteúdo de dois ou mais quadros com um clique.

Aplicar o comportamento Menu de salto

Quando você cria um menu de salto usando Inserir > Formulário > Menu de salto, o Dreamweaver cria um objeto de menu e anexa o comportamento Menu de salto (ou Ir do menu de salto) a ele. Geralmente não há necessidade de anexar o comportamento Menu de salto a um objeto manualmente.

É possível editar um menu de salto existente de duas maneiras:

• É possível editar e reorganizar itens de menu, alterar os arquivos para os quais saltar e alterar a janela na qual esses arquivos abrem, clicando duas vezes em um comportamento Menu de salto existente no painel Comportamentos.

• É possível editar os itens no menu da mesma forma que editaria itens em qualquer menu, selecionando o menu e usando o botão Valores da lista no Inspetor de propriedades.

Aplicar o comportamento Menu de salto Ir

O comportamento Ir do menu de salto está intimamente associado ao comportamento Menu de salto; o Ir do menu de salto permite associar um botão Ir a um menu de salto.(Antes de usar esse comportamento, um menu de salto já deve existir no documento.)Clicar no botão Ir abre o link selecionado no menu de salto.Um menu de salto normalmente não precisa de um botão Ir; selecionar um item de um menu de salto geralmente faz com que uma URL seja carregada sem necessidade de mais ações do usuário.Mas se o visitante selecionar o mesmo item que já está escolhido no menu de salto, o salto não ocorre.Em geral, isso não importa, mas se o menu de salto aparecer em um quadro, e os itens do menu de salto vincularem a páginas em outros quadros, um botão Ir é frequentemente útil, para permitir que os visitantes selecionem novamente um item que já está selecionado no menu de salto.

Aplicar o comportamento Abrir janela do navegador

Use o comportamento Abrir janela do navegador para abrir uma página em uma nova janela. Você pode especificar as propriedades da nova janela, incluindo seu tamanho, atributos (se é redimensionável, tem uma barra de menu e assim por diante) e nome. Por exemplo, você pode usar esse comportamento para abrir uma imagem maior em uma janela separada quando o visitante clica em uma imagem miniatura; com esse comportamento, você pode fazer a nova janela ter exatamente o tamanho da imagem.

Se não especificar atributos para a janela, ela abrirá no tamanho e com os atributos da janela da qual foi aberta. Especificar qualquer atributo para a janela automaticamente desativa todos os outros atributos que não estão explicitamente ativados. Por exemplo, se você não definir atributos para a janela, ela pode abrir em 1024 x 768 pixels e ter uma barra de navegação (mostrando os botões Voltar, Avançar, Página inicial e Recarregar), barra de ferramentas de localização (mostrando a URL), barra de status (mostrando mensagens de status, na parte inferior) e barra de menu (mostrando os menus Arquivo, Editar, Exibir e outros).Se definir explicitamente a largura como 640 e a altura como 480 e não definir outros atributos, a janela abrirá em 640 x 480 pixels, sem barras de ferramentas.

Aplicar o comportamento Mensagem pop-up

O comportamento de Mensagem Pop-up exibe um alerta JavaScript com a mensagem que você especificar.Como os alertas JavaScript têm apenas um botão (OK), use esse comportamento para fornecer informações ao usuário em vez de apresentar uma escolha.

Você pode incorporar qualquer chamada de função JavaScript válida, propriedade, variável global ou outra expressão no texto. Para incorporar uma expressão JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, preceda-a com uma barra invertida (\{).

Exemplo:

A URL desta página é {window.location} e hoje é {new Date()}.

Aplicar o comportamento Pré-carregar imagens

O comportamento Pré-carregar imagens reduz o tempo de exibição armazenando em cache imagens que não são mostradas quando a página aparece pela primeira vez (por exemplo, imagens que serão trocadas com comportamentos ou Scripts).

Aplicar o comportamento Definir texto do quadro

O comportamento Definir texto do quadro permite definir dinamicamente o texto de um quadro, substituindo o conteúdo e a formatação de um quadro pelo conteúdo especificado.O conteúdo pode incluir qualquer código HTML válido. Use esse comportamento para exibir informações dinamicamente.

Embora o comportamento Definir texto do quadro substitua a formatação de um quadro, você pode selecionar Preservar cor do fundo para preservar os atributos de cor do fundo da página e do texto.

Você pode incorporar qualquer chamada de função JavaScript válida, propriedade, variável global ou outra expressão no texto. Para incorporar uma expressão JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, preceda-a com uma barra invertida (\{).

Exemplo:

A URL desta página é {window.location} e hoje é {new Date()}.

Aplicar o comportamento Definir texto do contêiner

O comportamento Definir Texto do Contêiner substitui o conteúdo e a formatação de um contêiner existente (ou seja, qualquer elemento que pode conter texto ou outros elementos) em uma página com o conteúdo especificado. O conteúdo pode incluir qualquer código-fonte HTML válido.

É possível incorporar qualquer chamada de função JavaScript válida, propriedade, variável global ou outra expressão no texto.Para incorporar uma expressão JavaScript, coloque-a entre chaves ({}). Para mostrar uma chave, preceda-a com uma barra invertida (\{).

Exemplo:

A URL desta página é {window.location} e hoje é {new Date()}.

Aplicar o comportamento Definir Texto da Barra de Status

O comportamento Definir Texto da Barra de Status mostra uma mensagem na barra de status no canto inferior esquerdo da janela do navegador. Por exemplo, é possível usar esse comportamento para descrever o destino de um link na barra de status em vez de mostrar a URL associada a ele. Os visitantes frequentemente ignoram ou não percebem mensagens na barra de status (e nem todos os navegadores oferecem suporte completo para definir o texto da barra de status); se a mensagem for importante, considere exibi-la como uma mensagem pop-up ou como o texto de um elemento AP.

É possível incorporar qualquer chamada de função JavaScript válida, propriedade, variável global ou outra expressão no texto.Para incorporar uma expressão JavaScript, coloque-a entre chaves ({}). Para mostrar uma chave, preceda-a com uma barra invertida (\{).

Exemplo:

A URL desta página é {window.location} e hoje é {new Date()}.

Aplicar o comportamento Definir Texto do Campo de Texto

O comportamento Definir Texto do Campo de Texto substitui o conteúdo de um campo de texto de formulário pelo conteúdo especificado.

É possível incorporar qualquer chamada de função JavaScript válida, propriedade, variável global ou outra expressão no texto.Para incorporar uma expressão JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{).

Exemplo:

A URL desta página é {window.location} e hoje é {new Date()}.

Criar um campo de texto nomeado

Aplicar Definir texto do campo de texto

Aplicar o comportamento Mostrar/ocultar elementos

O comportamento Mostrar-ocultar elementos mostra, oculta ou restaura a visibilidade padrão de um ou mais elementos da página. Esse comportamento é útil para exibir informações conforme o usuário interage com a página. Por exemplo, quando o usuário move o ponteiro sobre uma imagem de planta, você pode mostrar um elemento da página fornecendo detalhes sobre a estação de crescimento e região da planta, quanta luz solar ela precisa, o tamanho que pode atingir e assim por diante. O comportamento apenas mostra ou oculta o elemento pertinente — ele não remove efetivamente o elemento do fluxo da página quando está oculto.

Este comportamento foi descontinuado a partir do Dreamweaver CS5.

Aplicar o comportamento Trocar imagem

O comportamento Trocar imagem troca uma imagem por outra alterando o atributo src da tag <img>. Use esse comportamento para criar rollovers de botão e outros efeitos de imagem (incluindo trocar mais de uma imagem por vez). Inserir uma imagem de rollover automaticamente adiciona o comportamento Trocar Imagem à sua página.

Há também um comportamento Restaurar troca de imagem, que restaura o último conjunto de imagens trocadas para seus arquivos de origem anteriores. Este comportamento é automaticamente adicionado sempre que você anexa o comportamento Trocar imagem a um objeto; se você deixar a opção Restaurar selecionada ao anexar Trocar imagem, nunca será preciso selecionar o comportamento Restaurar troca de imagem manualmente.

Aplicar o comportamento Validar formulário

O comportamento Validar formulário verifica o conteúdo de campos de texto especificados para garantir que o usuário inseriu o tipo correto de dados. Anexe este comportamento a campos de texto individuais com o evento onBlur para validar os campos enquanto o usuário está preenchendo o formulário, ou anexe a um formulário com o evento onSubmit para avaliar vários campos de texto de uma vez quando o usuário clica no botão Enviar. Anexar este comportamento a um formulário impede o envio de formulários com dados inválidos.

Veja também

• Inserir ou alterar um menu dinâmico de formulário HTML
• Criar quadros e conjuntos de quadros