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.
Using Behaviors Understanding Behaviors Behaviors are prepackaged JavaScript programs that let you add interactivity to your Web pages You can make your Web pages 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 Behavior Elements A 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 Applying Behaviors The 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 Applying Behaviors Open 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 Adding 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 Mouse Events Events 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: , , – onMouseout • Gets triggered: The cursor moves off of the tag • Used with these tags: , , Mouse Events – onMouseMove • Gets triggered: The cursor moves anywhere inside the tag • Commonly used with this tag: – onClick • Gets triggered: When a visitor clicks the tag and releases the mouse button • Commonly used with these tags: , , Mouse Events – onDblClick • Gets triggered: When a visitor double-clicks the tag • Commonly used with these tags: , , – onMouseDown • Gets triggered: When a visitor clicks the tag • Commonly used with these tags: , , Mouse Events – 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: , , Keyboard Events Keyboard 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: , , Keyboard Events – onKeyDown • Gets triggered: When a visitor presses a key while the tag is highlighted • Commonly used with these tags: , , – onKeyUp • Gets triggered: When a visitor releases a key while the tag is highlighted • Commonly used with these tags: , , Form Events While 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: – onReset • Gets triggered: When a visitor clicks the Reset button on a form • Commonly used with this tag: Spry Effects Spry 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 Appear/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 – 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 Blind: To display a hidden element or to make an element disappear To use this effect: Select the tag that you want to apply blind effect – From the Actions list on the Behavior panel, choose Effects ➝Blind Spry Effects – 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 in the “to” field Spry Effects Grow/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 Highlight: 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 Shake: 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 Advanced Behaviors Call 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 section of your Web page Change Property: can dynamically alter the value of a property or change the style of the following HTML tags: , , , , , , radio buttons, checkboxes, text fields, and password fields on forms Advanced Behaviors Select a tag, choose this behavior’s name from the + menu in the Behaviors panel, and select Change Property Advanced Behaviors – 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 ... your Web page Applying Behaviors The 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... 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 Applying Behaviors. .. Applying Behaviors Adding 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