Behaviors are prepackaged JavaScript programs that let you add interactivity to your Web pages. In this chapter, we will learn content: Understanding behaviors, behavior elements, applying behaviors, mouse events, keyboard events,...and another content.
Trang 1Using Behaviors
Trang 2Behaviors are prepackaged JavaScript programs that let you add interactivity to your Web pages
You can make your Web pages do things like:
– Open a new browser window to a specified size,
or without scroll bars, status bar, location bar … – Change the background color of any element on
a page
– Pop open an alert box with an important message for your site’s visitors
Understanding Behaviors
Trang 3A behavior include three elements: an action, an event, and an HTML tag
– The action: is the behaviors is supposed to
– The event is the trigger that causes the action
to happen
– Finally, you apply the event and the action to an
HTML tag to bring interactivity to your Web
page
Behavior Elements
Trang 4The Behaviors Panel: controls behaviors on web
page:
– View any behaviors that are applied to a tag
– Add more behaviors, and edit behaviors that you’ve already applied
To open the Behaviors panel, you can use one of three following ways:
– Choose Window ➝ Behaviors
– Press Shift+F4
– If the Tag inspector is open, click the Behaviors tab
Applying Behaviors
Trang 6Open the Behaviors panel:
– Select the object or tag you want to apply a
behavior to
– In the Behaviors panel, add an action
– Click the + button in the Behaviors panel and, from the Add Action menu, select the action you wish to add
– In the dialog box that opens, set options for the action
Applying Behaviors
Trang 7Adding Multiple Behaviors:
– You can apply several behaviors to the same tag
Editing Behaviors:
– Once you’ve applied a behavior, you can edit it anytime
– Double-click the behavior in the Behaviors panel
to reopen the Settings dialog box
– Make any changes you like, and then click OK
Remove behavior: click the (–) button or press
Delete
Applying Behaviors
Trang 8Events are at the heart of interactive Web pages
They trigger behaviors based on how site visitors interact with a Web page
Mouse Events:
– onMouseOver
• Gets triggered: The cursor moves over the tag
• Used with these tags: <a>, <area>, <img>
– onMouseout
• Gets triggered: The cursor moves off of the tag
• Used with these tags: <a>, <area>, <img>
Mouse Events
Trang 9– onMouseMove
• Gets triggered: The cursor moves anywhere
inside the tag
• Commonly used with this tag: <body>
– onClick
• Gets triggered: When a visitor clicks the tag
and releases the mouse button
• Commonly used with these tags: <a>, <area>,
<input type="button | checkbox | radio | reset
| submit">
Mouse Events
Trang 10– onDblClick
• Gets triggered: When a visitor double-clicks
the tag
• Commonly used with these tags: <a>, <area>,
<input type="button | checkbox |radio | reset |
submit">
– onMouseDown
• Gets triggered: When a visitor clicks the tag
• Commonly used with these tags: <a>, <img>,
<input type="button | checkbox | radio | reset
| submit">
Mouse Events
Trang 11– onMouseUp
• Gets triggered: When a visitor releases the
mouse button while the cursor is over the
tag, same as the onClick event
• Commonly used with these tags: <a>, <img>,
<input type="button | checkbox |radio | reset
| submit">
Mouse Events
Trang 12Keyboard events respond to key presses and releases
– onKeyPress
• Gets triggered: When a visitor presses and
releases a key while the tag is highlighted
• Commonly used with these tags: <textarea>,
<input type="file | password |text">, <a>
Keyboard Events
Trang 13– onKeyDown
• Gets triggered: When a visitor presses a key
while the tag is highlighted
• Commonly used with these tags: <textarea>,
<input type="file | password |text">, <a>
– onKeyUp
• Gets triggered: When a visitor releases a key
while the tag is highlighted
• Commonly used with these tags: <textarea>,
<input type="file | password |text">, <a>
Keyboard Events
Trang 14While each element of a form can respond to a variety of events, the whole can respond to only two events:
– onSubmit
• Gets triggered: When a visitor clicks the
Submit button on a form
• Commonly used with this tag: <form>
Trang 15Spry Effects: are part of Adobe’s Spry Framework
To use a Spry Effect, you must:
– Apply an ID to the “target”
– Add a Spry Effect behavior to a tag
Spry Effects
Trang 16Appear/Fade: To make an element fade in or fade
out to add a dramatic introduction to your site
after the page loads
To use this effect:
– Select the tag that you want to trigger the fade
in or out
– From the Actions list on the Behavior panel, choose Effects ➝ Appear/Fade
– Select a target element from the first menu
− Type an amount in the “Effect duration” field
Spry Effects
Trang 17– Choose the type of effect: Fade or Appear
– Appear from: percentage amount in the “from” and “to” fields
– Toggle effect: Optional
– Click OK to apply the behavior
Spry Effects
Trang 18Blind: To display a hidden element or to make an
Trang 19– If you want to display a hidden element on the page, choose “Blind down”
– To make an element disappear, choose “Blind up.”
– If you wish to hide an already visible element,
then type 100 in the “from” field and 0 in the
“to” field
Spry Effects
Trang 20Grow/Shrink: you can make a photo, a paragraph,
or a div full of content grow from a tiny speck on the screen to its full size, or you can make an element disappear
Spry Effects
Trang 21Highlight: Adding a background color to a
paragraph, headline, or div is one way to create visual contrast and make an important piece of information stand out
Spry Effects
Trang 22Shake: The Shake effect is like adding an
earthquake (lắc lư) to a Web page The target element shakes violently left to right on the page for a second or so
Spry Effects
Trang 23Call JavaScript: You can use the Call JavaScript
behavior to execute a single line of JavaScript code
or to call a JavaScript function that you’ve added to the <head> section of your Web page
Change Property: can dynamically alter the value
of a property or change the style of the following HTML tags: <div>, <span>, <img>, <form>,
<textarea>, <select>, radio buttons, checkboxes, text fields, and password fields on forms
Advanced Behaviors
Trang 24Select a tag, choose this behavior’s name from the + menu in the Behaviors panel, and select Change Property
Advanced Behaviors
Trang 25– Type of element Choose the type of element
whose property you wish to change
– Element ID: From this pop-up menu, choose the
ID of the object you want to modify
– Property: Choose the property you want to
change
– New value Type the new value you wish to set
for this property This value should be appropriate to the type of property you’ll be changing
Advanced Behaviors