Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Event Styling cont.

Solution cont. The first $('document').ready() function in page.js executes a generic function when the
document’s DOM is ready and assigns events to elements.

Overall

pattern

JavaScript in page.js

$('document').ready()

The purpose of the $() function is to select DOM elements using CSS selectors. This allows you to use

the same CSS selectors to style elements and to attach events to elements! This conceptually ties the

stylesheet into the dynamic HTML.

Detailed

pattern

JavaScript in page.js

$('CSS_SELECTOR').click(function(e){

$(this).closest('PARENT_CSS_SELECTOR').children().not('CSS_SELECTOR').toggleClass(

'TOGGLE_CSS_SELCTOR');

$(this).parent().removeClass('TOGGLE_CSS_SELECTOR');

});

Using click(), you can assign an event listener that waits for a click event. By chaining together

generic event handlers, you can create powerful event handlers while writing very little code.

The name of the event is the function name click(). The name doesn’t include the “on” prefix. In the

example, I used click instead of onclick.

A CSS selector is used in the function $(). It’s a string that determines which elements get assigned to

the event. You can use any CSS selector, including child and attribute selectors.

$(this) refers to the element that has been clicked.

closest() selects the next first parent DOM element of the element that has been clicked that has the

parent CSS selector.

children() selects all the children of the node that is returned by closest().

not() filters out any results that match the CSS selector.

toggleClass() adds a CSS selector to or removes it from elements.

$(this).parent().removeClass('TOGGLE_CSS_SELECTOR'); removes the hidden CSS class from

the parent of the clicked element. This is done so that the clicked element can’t be hidden.

Explanation By using event handlers to modify the classes assigned to elements, you can control how your
document responds to events by using a stylesheet. This keeps content, code, and styles separate,
which improves productivity and reduces maintenance. By simply toggling classes, swapping them in
and out, and adding, removing, or replacing them, you can create just about any effect.

Tips This design pattern is extensible. You can create your own event handler and helper functions. To
make it easy to extend, jQuery contains additional utility functions to manipulate strings and
elements, and to aid in debugging.
The most commonly used events are onclick, onmouseover, and onmouseout. Forms often use
onsubmit and onreset. Any event handler can affect accessibility, but the following events require
much more effort and testing to keep a document accessible. Form elements can use onchange,
onfocus, onblur, and onselect. Advanced techniques can use onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, and onmouseup. With the availability of touch devices such as smart
phones and tablets, you should also listen for touchstart, touchmove, and touchend events.

Example In the example, when the user clicks a rollup-trigger element, the hidden class is applied to all
children of the rollup element except for the child containing the rollup trigger. When the user clicks
the rollup trigger again, the hidden class is removed. You can create a rollup effect by styling the
hidden class to hide elements, or you could create some other effect.

Related to Rollup, Tabs, Flyout Menu; Popup Alert (Chapter 20)