Guía del usuario Cancelar

Uso de efectos jQuery en Dreamweaver

 

 

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

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

  2. Seleccione Windows > Comportamientos para abrir el panel Comportamientos.

  3. Haga clic en el icono de signo Más, después haga clic en Efectos y, a continuación, haga clic sobre el efecto deseado.

    Uso de efectos jQuery
    Uso de efectos jQuery

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

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

  5. 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 requeridos con el fin de que funcionen los efectos jQuery:
<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>
<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>
<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>
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
<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>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
<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.

  1. Seleccione el elemento de página requerido.

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

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

  4. Haga clic en el evento requerido.

Eliminación de efectos jQuery

  1. Seleccione el elemento de página requerido.

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

  2. Haga clic en el efecto que desea eliminar y, a continuación, haga clic en el icono Eliminar.

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?