JQuery_ Novice to Ninja - Earle Castledine [60]
A common technique left over from the old days of JavaScript development is to simply return false from the event handler to prevent the default actions. You need to be aware, though, that using this method in a jQuery handler has the same effect as calling both preventDefault and stopPropagation.
You can also use the commands isDefaultPrevented and isPropagationStopped to test whether an event’s flow has been modified. As might be implied from their names, these functions will return true if the default action has been prevented or the event propagation stopped respectively, and false otherwise.
Open/Closed Indicators
Our menu control is functioning as planned, so it’s time to abide by the inescapable jQuery law: if it ain’t broke, add some bells and whistles to it!
The first tweak we’ll implement is the addition of open/closed indicators to the right of the section headings, as shown in Figure 5.2.
Figure 5.2. Open/closed indicators
You’ve probably seen this kind of indicator before on the Web (or in desktop applications, for that matter). They usually take the form of small triangles whose direction serves to indicate whether the menu is open or closed. They’re extremely helpful, as they provide a hint to the user that there’s hidden information to be revealed.
We’ll use a CSS sprite to add an indicator to our menu; a single image will contain both the contracted (down-facing) and expanded (up-facing) arrows for our menu sections.
By default, all of the sections are closed, so we show the contracted arrow state in our CSS. In our sprite image the contracted state is aligned to the top, while the expanded state is 20 pixels below the top. We apply this background image to li elements inside the menu, and then remove it from deeper nested items:
chapter_05/03_open_closed_indicators/menu.css (excerpt)
#menu li {
cursor:pointer;
border-bottom:1px solid #444;
background: #94C5EB url(arrows.png) no-repeat right top;
}
…
#menu li li {
cursor:auto;
border:0;
padding:0 14px;
background-color:#fff;
background-image: none;
}
With our background image in place, we now need to adjust the CSS sprite’s position whenever we toggle a menu item. When the menu item slides down we show the expanded state, and when it slides up we show the contracted state. We’ll make clever use of chaining to apply the css action before we drill down to find the ul to show or hide:
chapter_05/03_open_closed_indicators/script.js (excerpt)
$('#menu > li').toggle(function() {
$(this)
.css('background-position', 'right -20px')
.find('ul').slideDown();
}, function() {
$(this)
.css('background-position', 'right top')
.find('ul').slideUp();
});
Menu Expand on Hover
For our next trick, we want to make the menu respond to hover events as well as click events. When a user hovers over one of our parent menu items, we’ll pause briefly, then expand the menu. Now, you’ve already seen enough toggle and hover effects to last a lifetime (and don’t worry, there’s plenty more to come!) so we’ll give this one a twist. The jQuery hover event fires the instant you move your mouse over the target item. But for this effect we’ll delay the execution so that it only fires if the user hovers for a short while. Otherwise, the control would be virtually unusable, as it would snap open and closed if you so much as grazed it with the mouse.
It’s a subtle but important change—and if you try the menu both with and without a delay as follows, you’ll notice that the feel of the control is altered dramatically:
chapter_05/04_menu_expand_on_hover/script.js (excerpt)
$('#menu > li').hover(function() {
$(this).addClass('waiting');
setTimeout(function() {
$('#menu .waiting')
.click()
.removeClass('waiting');
}, 600);
}, function() {
$('#menu .waiting').removeClass('waiting');
});
When the user first mouses over the menu element, we