This section of the tutorial provides steps on how to
animate the parameter form object on your HTML page using jQuery
animations.
x
Procedure: How to Create Text for the Animation
In
this procedure, you create the text container and the text that
will guide users on how to view the parameter form object.
Note: You
can sort the display of properties in the Properties panel by category
or in alphabetical order. If you cannot locate a property in your
display, select a different sorting option from the Properties panel
toolbar.
-
On the Components tab,
in the Generic Elements group, click Text.
-
Drag your
mouse across the HTML canvas to create the text container.
-
Right-click
the text container, and click Edit text,
or double-click the text container.
-
Delete the
default text, and then type Click to Show/Hide Parameters.
-
Click the
text container.
-
In the Properties
panel, under Core Attributes, in the Unique Identifier field, type animatedtxt.
-
In the
Properties panel, under Basic, Text, and Border, set the following property
values. When you set the color property values, click the property
arrow and use the Color Picker dialog box.
-
Color: black
-
Background-color: gray
-
Width: 255px
-
Height: 20px
-
Border-color: black
-
Border-style: solid
-
Border-width: thin
-
Text-align: center
-
Border-radius: 15px
-
Click the
text container, press the Ctrl key, and click the report container.
-
On the Positioning tab,
in the Positioning group, click Left.
An example of how your page may display is shown in the
following image.
x
Procedure: How to Animate the Parameter Form Object
In
this procedure, you add jQuery animations to the parameter form
object using the Properties panel and the Tasks & Animations
panel.
Note: You can sort the display of properties
in the Properties panel by category or in alphabetical order. If
you cannot locate a property in your display, select a different
sorting option from the Properties panel toolbar.
-
Click the
parameters form object.
-
In the Properties
panel, under Core attributes, in the Unique Identifier field, type parameterform.
-
In the Properties
panel, under Layout, set the Display property value to none.
An example of how your page may display is shown in the
following image. You can adjust the space between the new text box,
and the report if you want.
Tip: The
next steps in this procedure instruct you to change settings in the
Tasks & Animations panel. To keep the panel open, dock the Tasks
& Animations panel.
-
In the Tasks
& Animations panel, under the jQuery Animations section, click New.
Animation1 appears in the List of list box.
-
In the All
Targets list box, click parameterform, and
then click the Add from list icon. Parameterform
appears in the Selected Targets list box.
Note: You can also double-click parameterform to
add it to the Selected Targets list box.
-
In the Visibility
area, click No Change.
-
In the Effect
area, in the Type list, click Slide: slide in/out.
Additional options populate the Effect area.
-
In the *Value
list, click Left.
-
In the Additional
Properties area, select the Toggle animation check
box.
-
On the Quick
Access Toolbar, click Save.
-
In the Tasks
& Animations panel, under the Tasks section, click New.
-
In the Trigger
Type list, click Click.
-
In the Trigger
Identifier area, click the All/selected only menu,
and then click All.
-
Select the animatedtxt check box.
-
In the Requests/Actions
area, click the Requests selections menu,
point to Run Animation, and then click Animation1.
-
In the Tasks
& Animations panel, under the Tasks section, click New.
-
In the Trigger
Type list, click Click.
-
In the Trigger
Identifier area, select the formSubmit check
box.
Note: If you add or delete other parameter form
objects from your page, the number associated with the form object
might be different. Each object is assigned an iterative number
that increases when you add a new object.
-
In the Requests/Actions
area, click the Requests selections menu,
point to Run Animation, and then click Animation1.
-
On the Quick
Access Toolbar, click Save.