Let's add some effects to the task list. First, we will add the ability to select a task in the list. When a task is clicked, it will grow in size and get a colored border so it's easy to tell that it is selected. We will also add a hover effect to the tasks so that when the user moves the mouse over a task, the task's action buttons are shown. When the mouse moves off of a task, the buttons will fade back out. You can find the code for this section in chapter2/example2.2
.
The first thing we need to do is go back to taskAtHand.js
and add a click
event handler to the task
element after it is created in the addTaskElement()
method:
$task.click(function() { onSelectTask($task); });
It calls the onSelectTask()
method when a task is clicked. In this method we will mark a task
element as selected by giving it a class name of selected
. We will also remove the selected
class from the previously selected task element:
function onSelectTask($task) { if ($task) ...