Web Development with jQuery®

(^66) ❘ CHAPTER 3 EVENTS
background-size: 48px 48px;
height: 56px;
width: 54px;
margin: 10px auto 3px auto;
}
div.finderIconSelected {
background-color: rgb(204, 204, 204);
border-radius: 5px;
}
div.finderDirectoryName {
text-align: center;
}
span.finderDirectoryNameSelected {
background: rgb(56, 117, 215);
border-radius: 8px;
color: white;
padding: 1px 7px;
}
Finally, the JavaScript in Example 3-1.js adds some selection functionality to the folders that you
created.
$(document).ready(
function()
{
$('div.finderDirectory, div.finderFile').click(
function(event)
{
$('div.finderIconSelected')
.removeClass('finderIconSelected');
$('span.finderDirectoryNameSelected')
.removeClass('finderDirectoryNameSelected');
$(this).find('div.finderIcon')
.addClass('finderIconSelected');
$(this).find('div.finderDirectoryName span')
.addClass('finderDirectoryNameSelected');
}
);
$('div.finderDirectory, div.finderFile')
.filter(':first')
.click();
}
);
The collection of fi les that make up Example 3-1 results in what you see in Figure 3-1, when the fi le
is loaded into Safari.
http://www.it-ebooks.info