Usar efeitos do jQuery no Dreamweaver

Pesquisar
Adobe Dreamweaver Guia do Usuário

Nesta página

Aplica-se a: Adobe Dreamweaver

在中国购买的 Creative Cloud 产品不含 CC 桌面应用程序中的 Creative Cloud 移动应用程序和在线服务及相关功能。

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

  1. Na visualização Design ou Código do documento do Dreamweaver, selecione o elemento ao qual você deseja aplicar um efeito do jQuery.

  2. Selecione Janelas > Comportamentos para abrir o painel Comportamentos.

  3. Clique no ícone de adição, clique em Efeitos e clique no efeito desejado.

    Adicionar efeitos do jQuery
    Adicionar efeitos do jQuery

    O painel de personalização com as configurações do efeito selecionado é exibido.

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

  5. 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 de arquivos externos para os arquivos dependentes necessários para que os efeitos do 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.

  1. Selecione o elemento de página obrigatório.

  2. No painel Janelas > Comportamentos, clique no ícone Mostrar eventos de grupo.

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

  4. Clique no evento obrigatório.

Remover efeitos do jQuery

  1. Selecione o elemento de página obrigatório.

    O painel Comportamentos lista todos os efeitos aplicados atualmente ao elemento de página selecionado.

  2. Clique no efeito que deseja excluir e clique no ícone Excluir.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online