Uso de efectos jQuery en Dreamweaver

Última actualización el 10/12/2018

Diseñe sitios webs atractivos con los increíbles efectos de jQuery. La integración de Dreamweaver con jQuery le permite incluir efectos como reguladores sin tener que escribir código.

Adición de efectos jQuery

En la vista Diseño o Código de su documento de Dreamweaver, seleccione el elemento al que desea aplicar un efecto jQuery.

Seleccione Windows > Comportamientos para abrir el panel Comportamientos.

Haga clic en el icono Más, haga clic en Efectos y, a continuación, haga clic en el efecto requerido.

Uso de efectos jQuery
Uso de efectos jQuery

Aparecerá el panel de personalización con la configuración del efecto seleccionado.

Especifique la configuración, por ejemplo, el elemento de destino al que debe aplicarse el efecto y la duración del efecto.

El elemento de destino puede ser el mismo que el elemento que seleccionó inicialmente o un elemento diferente de la página. Por ejemplo, si desea que los usuarios hagan clic en un elemento A para ocultar o mostrar un elemento B, el elemento de destino es B.

Para añadir varios efectos jQuery, repita los pasos anteriores.

Al elegir varios efectos, Dreamweaver aplica los efectos en el orden en el que se muestran en el panel Comportamientos. Para cambiar el orden de los efectos, utilice las teclas de flecha situadas en la parte superior del panel.

Dreamweaver inserta automáticamente el código correspondiente en el documento. Por ejemplo, si ha seleccionado el efecto “Desvanecer”, se insertará el siguiente código:

  • Referencias de archivos externos para los archivos dependientes necesarios para que los efectos de jQuery funcionen:

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

  • El siguiente código se aplica al elemento en la etiqueta body:

<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>

  • Se añade una etiqueta script junto con el siguiente código:

<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

Efectos jQuery basados en eventos

Cuando se aplica un efecto jQuery, se asigna al evento onClick de forma predeterminada. Puede cambiar el evento desencadenante del efecto mediante el panel Comportamientos.

Seleccione el elemento de página requerido.

En Ventanas > panel Comportamientos, haga clic en el icono Mostrar eventos establecidos.

Haga clic en la fila correspondiente al efecto que se aplica en ese momento. Tenga en cuenta que la primera columna cambia a una lista desplegable que proporciona una lista de eventos entre los que elegir.

Haga clic en el evento requerido.

Eliminación de efectos jQuery

Seleccione el elemento de página requerido.

El panel Comportamientos muestra todos los efectos actualmente aplicados al elemento de página seleccionado.

Haz clic en el efecto que quieres eliminar y, a continuación, haz clic en el icono Eliminar.