Na visualização Design ou Código do documento do Dreamweaver, selecione o elemento ao qual você deseja aplicar um efeito do jQuery.
Última atualização em
10/12/2018
Crie sites atraentes usando efeitos divertidos do jQuery. A integração do Dreamweaver com o jQuery permite incluir efeitos como controles deslizantes sem ter que escrever códigos.
Adicionar efeitos do jQuery
Selecione Janelas > Comportamentos para abrir o painel Comportamentos.
Clique no ícone Mais, clique em Effects e, em seguida, clique no efeito desejado.
O painel de personalização com as configurações do efeito selecionado é exibido.
Especifique as configurações, como o elemento de destino ao qual o efeito deve ser aplicado, e a duração do efeito.
O elemento de destino pode ser igual ao elemento selecionado inicialmente ou a um elemento diferente na página. Por exemplo, se desejar que os usuários cliquem em um elemento A para ocultar ou mostrar um elemento B, o elemento de destino é B.
Para adicionar vários efeitos do jQuery, repita as etapas acima.
Ao selecionar vários efeitos, o Dreamweaver aplica os efeitos na ordem em que são exibidos no painel Comportamentos. Para alterar a ordem dos efeitos, use as teclas de seta na parte superior do painel.
O Dreamweaver insere automaticamente o código relevante no documento. Por exemplo, se você selecionar o efeito “Fade”, o seguinte código será inserido:
- Referências a arquivos externos necessários para que os efeitos jQuery funcionem:
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
- O seguinte código é aplicado ao elemento na tag de corpo:
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
- Uma tag de script com o seguinte código é adicionada:
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
Efeitos do jQuery com base no evento
Quando você aplica um efeito do jQuery, ele é atribuído ao evento onClick por padrão. Você pode alterar o evento de disparo do efeito usando o painel Comportamentos.
Selecione o elemento de página obrigatório.
No painel Janelas > Comportamentos, clique no ícone Mostrar eventos de grupo.
Clique na linha que corresponde ao efeito que está atualmente aplicado. Observe que a primeira coluna se transforma em uma lista suspensa que fornece uma lista de eventos a serem escolhidos.
Clique no evento obrigatório.
Remoção de efeitos do jQuery
Selecione o elemento de página obrigatório.
O painel Comportamentos lista todos os efeitos aplicados atualmente ao elemento de página selecionado.
Clique no efeito que deseja excluir e, em seguida, clique no ícone Excluir.
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
