Web Development with jQuery®

Creating Custom Events (^) ❘ 83
-ms-user-select: none;
}
div#finderAdditionalFiles {
display: none;
}
div.finderDirectory,
div.finderFile {
float: left;
width: 150px;
height: 100px;
overflow: hidden;
}
div.finderIcon {
background: url('images/Folder 48x48.png') no-repeat center;
background-size: 48px 48px;
height: 56px;
width: 54px;
margin: 10px auto 3px auto;
}
div.finderFile div.finderIcon {
background-image: url('images/Safari Document.png');
}
div.finderIconSelected {
background-color: rgb(204, 204, 204);
border-radius: 5px;
}
div.finderDirectoryName,
div.finderFileName {
text-align: center;
}
span.finderDirectoryNameSelected,
span.finderFileNameSelected {
background: rgb(56, 117, 215);
border-radius: 8px;
color: white;
padding: 1px 7px;
}
And fi nally, this example is topped off with the following JavaScript, which implements a custom
event handler and a trigger for that event handler.
$(document).on(
'DOMContentLoaded',
function()
{
$('div#finderFiles')
.on(
'click.finder',
'div.finderDirectory, div.finderFile',
function(event)
{
$('div.finderIconSelected')
.removeClass('finderIconSelected');
http://www.it-ebooks.info