Web Development with jQuery®

is given a width and height of 48 pixels, matching the dimensions of the background
image.
The last items of interest in the style sheet defi ne the look for selected fi les. That’s done in the fol-
lowing two rules:
li.finderCategoryFileSelected {
background: rgb(24, 67, 243)
url('images/Selected Item.png')
repeat-x
bottom;
color: white;
}
li.finderCategoryFileSelected a {
color: lightblue;
}
The preceding two rules are for

elements with the class name finderCategoryFileSelected.
This class name is dynamically added and removed from

elements by jQuery. This addition of
this class name lets your users see which fi le is currently selected. Beyond providing a visual cue for
selection, this also lets you implement the ability to add a Delete button, which when pressed would
remove the selected item or implement some other functionality that is contingent on the selection of
an element.
The JavaScript for this example is lean and to the point. The JavaScript basically does two things. It
provides the ability to select an

element by adding and removing the class name finderCatego-
ryFileSelected as appropriate to indicate selection. And it makes the

elements sortable using
the jQuery UI Sortable plugin.
When the DOM is ready, the fi rst task is to attach a mousedown event to each

element. You can
use this event to implement an indication of which element is selected.
$('li.finderCategoryFile').mousedown(
function()
{
$('li.finderCategoryFile')
.not(this)
.removeClass('finderCategoryFileSelected');
$(this).addClass('finderCategoryFileSelected');
}
);
The script selects every

element with class name finderCategoryFile. The class name is added
to the selection, even though as it stands, you could just select every

element without a class
name and get the same result so that your application can be easily extended. You might bring in
more functionality that involves adding

elements that are completely unrelated to what you’re
doing here. Adding the class name to the selector makes the selection more specifi c and gives you the
ability to expand your application’s functionality more effortlessly. So every

element with class
name finderCategoryFile is selected; then the

element on which the mousedown event is taking
place is fi ltered out using .not(this), and the class name finderCategoryFileSelected is removed
from every

element, except the

element on which the mousedown event is taking place.
http://www.it-ebooks.info