beautypg.com

Event-based jquery effects, Remove jquery effects – Adobe Dreamweaver CC 2015 User Manual

Page 190

background image

183

Layout and design

Last updated 6/3/2015

3

Click

, click Effects, and then click the required effect.

The customization panel with the settings for the selected effect appears.

4

Specify the settings, such as, the target element to which the effect is to be applied, and the duration for the effect.

The target element can be the same as the element you selected initially or a different element on the page. For
example, if you want users to click an element A to hide or show an element B, the target element is B.

5

To add multiple jQuery effects, repeat the steps above.

When you choose multiple effects, Dreamweaver applies the effects in the order they are displayed in the Behaviors
panel. To change the order of the effects, use the arrow keys at the top of the panel.

Dreamweaver automatically inserts the relevant code into your document. For example, if you have selected the 'Fade'
effect, the following code is inserted:

• External file references for the dependent files that is required for jQuery effects to work:

• The following code is applied to the element in the body tag:

  • Earth Forms

  • • A script tag along with the following code is added:

    Event-based jQuery effects

    When you apply a jQuery effect, it is assigned to the onClick event by default. You can change the trigger event for the
    effect using the Behaviors panel.

    1

    Select the required page element.

    2

    In the Windows > Behaviors panel, click the Show Set Events icon.

    3

    Click the row that corresponds to the effect that is currently applied. Note that the first column changes to a drop-
    down list providing a list of events that you can choose from.

    4

    Click the required event.

    Remove jQuery effects

    1

    Select the required page element.

    The Behaviors panel lists all the effects that are currently applied to the selected page element.

    2

    Click the effect you want to delete and then click

    .