BÀI TẬP SỐ 2
[Link]
body background-color: #bbc; display: block;
{ } width: 15em;
font: 1em Verdana, Geneva, sans- }
serif; #app>header
padding: 0; { #task-list
margin: 5px; padding: 0 0.5em; {
color: Black; font-size: 1.5em; padding: 0;
background-color: WhiteSmoke; color: WhiteSmoke; }
} background-color: #006;
div } #task-list li
{ #app>footer {
padding: 0; { list-style: none;
margin: 0; padding: 0.25em; padding: 0.25em;
} color: WhiteSmoke; margin: 0.25em;
button background-color: #006; }
{ }
cursor: pointer; #task-list .task .tools
} #main {
.hidden { display: inline-block;
{ margin: 1em; }
display: none; } #task-list .task .tools button
} {
#add-task label margin: 0;
/***********/ { padding: 0;
/* App */ display: block; width: 1.25em;
/************/ font-weight: bold; height: 1.25em;
#app } border: none;
{ #new-task-name }
margin: 4px; {
font-size: 1em;
[Link]
"use strict";
function TaskAtHandApp()
{
var version = "v1.2";
function setStatus(message)
{
$("#app>footer").text(message);
}
function addTask()
1
{
var taskName = $("#new-task-name").val();
if (taskName)
{
addTaskElement(taskName);
// Reset the field
$("#new-task-name").val("").focus();
}
}
function addTaskElement(taskName)
{
var $task = $("#task-template .task").clone();
$("[Link]-name", $task).text(taskName);
$("#task-list").append($task);
// Button events
$("[Link]", $task).click(function() { $[Link](); });
$("[Link]-up", $task).click(function() { $[Link]($[Link]()); });
$("[Link]-down", $task).click(function() { $[Link]($[Link]()); });
// Task name events
$("[Link]-name", $task).click(function() { onEditTaskName($(this)); });
$("[Link]-name", $task).change(function() { onChangeTaskName($(this)); })
.blur(function() { $(this).hide().siblings("[Link]-name").show(); });
}
function onEditTaskName($span)
{
$[Link]()
.siblings("[Link]-name").val($[Link]()).show().focus();
}
function onChangeTaskName($input)
{
$[Link]();
var $span = $[Link]("[Link]-name");
if ($[Link]())
{
$[Link]($[Link]());
}
$[Link]();
}
[Link] = function()
{
$("#new-task-name").keypress(function(e)
{
2
if ([Link] == 13) // Enter key
{
addTask();
return false;
}
})
.focus();
$("#app>header").append(version);
setStatus("ready");
};
}
$(function()
{
[Link] = new TaskAtHandApp();
[Link]();
});
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Task@Hand</title>
<link href="[Link]" rel="StyleSheet" />
<script src="lib/[Link]"></script>
<script src="[Link]"></script>
</head>
<body>
<div id="app">
<header>Task@Hand</header>
<div id="main">
<div id="add-task">
<label for="new-task-name">Add a task</label>
<input type="text" id="new-task-name" title="Enter a task name"
placeholder="Enter a task name"/>
</div>
<ul id="task-list">
</ul>
</div>
<footer>
</footer>
</div>
3
<div id="templates" class="hidden">
<ul id="task-template">
<li class="task">
<div class="tools">
<button class="delete" title="Delete">X</button>
<button class="move-up" title="Up">^</button>
<button class="move-down" title="Down">v</button>
</div>
<span class="task-name"></span>
<input type="text" class="task-name hidden"/>
</li>
</ul>
</div>
</body>
</html>
