Scribd Logo
Upload

Welcome to Scribd!

  • BÀI TẬP SỐ 2

    Uploaded by

    19110202
    6 views4 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views4 pages

    BÀI TẬP SỐ 2

    Uploaded by

    19110202

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    BÀI TẬP SỐ 2

    taskAtHand.css
    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;

    taskAtHand.js

    "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();
    $("span.task-name", $task).text(taskName);

    $("#task-list").append($task);

    // Button events
    $("button.delete", $task).click(function() { $task.remove(); });
    $("button.move-up", $task).click(function() { $task.insertBefore($task.prev()); });
    $("button.move-down", $task).click(function() { $task.insertAfter($task.next()); });

    // Task name events


    $("span.task-name", $task).click(function() { onEditTaskName($(this)); });
    $("input.task-name", $task).change(function() { onChangeTaskName($(this)); })
    .blur(function() { $(this).hide().siblings("span.task-name").show(); });
    }

    function onEditTaskName($span)
    {
    $span.hide()
    .siblings("input.task-name").val($span.text()).show().focus();
    }

    function onChangeTaskName($input)
    {
    $input.hide();
    var $span = $input.siblings("span.task-name");
    if ($input.val())
    {
    $span.text($input.val());
    }
    $span.show();
    }

    this.start = function()
    {
    $("#new-task-name").keypress(function(e)
    {

    2
    if (e.which == 13) // Enter key
    {
    addTask();
    return false;
    }
    })
    .focus();

    $("#app>header").append(version);
    setStatus("ready");
    };
    }

    $(function()
    {
    window.app = new TaskAtHandApp();
    window.app.start();
    });

    taskAtHand.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>Task@Hand</title>
    <link href="taskAtHand.css" rel="StyleSheet" />
    <script src="lib/jquery-1.8.1.min.js"></script>
    <script src="taskAtHand.js"></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>

    You might also like