To-Do List

by Emmanuel Garcia

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<div id="content">
    <button id="AddProject">Add Project</button>
    <section>
        <div id="tabs">
            <ul>
                <li><a href="#project1">Project 1</a>  <span class="ui-icon ui-icon-close">Remove Tab</span>

                </li>
            </ul>
            <div id="project1">
                <div class="accordion">
                    <div>
                         <h3><a href="#">Download jQuery UI</a></h3>

                        <div>
                            <input type="checkbox" class="completed"> <strong>Download jQuery UI</strong>

                            <div>Go to <a href="http://jqueryui.com/download">http://jqueryui.com/download</a> to download jQuery UI.</div>
                            <div> <strong>Date due:</strong> 11/15/2011</div>
                        </div>
                    </div>
                    <div>
                         <h3><a href="#">Build Theme for jQuery UI</a></h3>

                        <div>
                            <input type="checkbox" class="completed"> <strong>Build Theme for jQuery UI</strong> 
                            <div>Go to <a href="http://jqueryui.com/theme">http://jqueryui.com/theme</a> to build my custom theme.</div>
                            <div> <strong>Date due:</strong> 11/15/2011</div>
                        </div>
                    </div>
                    <div>
                         <h3><a href="#">Build complex UI with jQuery UI</a></h3>

                        <div>
                            <input type="checkbox" class="completed"> <strong>Build complex UI with jQuery UI</strong> 
                            <div>Using my newly downloaded jQuery...

CSS

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 62.5%;
    /* Causes base font size to be ~10px */
}
/* Site wide styles */
 label {
    width: 75px;
    font-weight: bold;
    display:block;
    float: left;
    line-height: 1.8em;
    text-align: right;
}
input[type=text], input[type=password], textarea {
    width: 175px;
    margin-left: 5px;
}
/* Login Page Styles */
 #login #content {
    width: 344px;
    margin: 20px auto;
}
#login section {
    font-size: 1.4em;
    width: 300px;
    background-color: #ccc;
    position: relative;
    z-index: 1003;
}
#login section p {
    padding-bottom: 20px;
}
#login p.ui-state-error {
    padding: 5px;
    display: none;
}
#login header, #login section div.ui-widget-content {
    padding: 12px;
}
#login section form div {
    padding: 8px 0px;
}
#login #btnLogin {
    margin-left: 80px;
}
#login .ui-widget-overlay {
    z-index: 1002;
}
/* todo styles */
 #todo #content {
    width: 400px;
    margin: auto;
    text-align: right;
}
#todo section {
    text-align: left;
}
#todo #AddProject {
    margin: 10px 0px;
}
#todo .AddToDo {
    margin-top: 10px;
}
#todo #AddProjectItem, #todo #AddToDoItem {
    display: none;
}
#todo #AddProjectItem p, #todo #AddToDoItem p {
    margin-top: 5px;
    margin-bottom: 10px;
}
#todo #AddToDoItem div {
    padding: 8px 0px;
}
#todo #tabs li .ui-icon-close {
    float: left;
    margin: 0.4em 0.2em 0 0;
    cursor: pointer;
}

JavaScript

// Setup our tabs and cache the jQuery Object to be reused.
var $tabs = $("#tabs").tabs({

    // tabTemplate: HTML template from which a new tab is created and added. 
    //                            The placeholders #{href} and #{label} are replaced with the
    //                            url and tab label that are passed as arguments to 
    //                            the add method.
    tabTemplate: "<li><a href='#{href}'>#{label}</a>\
                                 <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",

    // add (event): This event is triggered when a tab is added.
    add: function (event, ui) {

        // Setup a tab based on a jQuery Template defined in the HTML.            
        $("#newProjectTabTemplate").tmpl()

        // append the template results to the selected contents.
        .appendTo(ui.panel)

        // We need to recreate our To Do list accordions to setup the new 
        // accordion that was created with the new project tab.
        .setupToDoList();
    }
});

// Setup a click event to remove a tab from the tab bar.
$("#tabs span.ui-icon-close").live("click", function () {

    // Remove (method): Remove a tab. The second argument is the zero-based 
    //                                    index of the tab to be removed.
    $tabs.tabs('remove', $(this).closest('li').index());
});

// Setup a dialog widget and cache the results so we can call it easily.
// This will ask the user for the name of the project.
var addProjectItem = $("#AddProjectItem").dialog({

    // modal: If set to true, the dialog will have modal behavior; other items
    //        on the page will be disabled (i.e. cannot be interacted with). Modal 
    //        dialogs create an overlay below the dialog but above 
    //        other page elements.
    modal: true,

    // autoOpen: When autoOpen is true the dialog will open automatically when 
    //                     dialog is called. If false it will stay hidden until 
 ...