<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do List Application</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css"
integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"
integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<style>
#container {
width: 700px;
height: 500px;
margin: 70px auto;
border: 2px solid rgb(125, 181, 66);
}
h2 {
color: rgb(125, 181, 66);
text-align: center;
}
#projects {
width: 650px;
height: 250px;
margin: 0px auto;
}
ol li {
border: 1px dotted black;
cursor: pointer;
padding: 5px;
margin-bottom: 5px;
}
ol li:hover {
background: #6eb7d6;
}
#btnAddProject {
margin-left: 565px;
margin-bottom: 20px;
}
#btnAddTask {
margin-left: 580px;
margin-top: 20px;
}
.ui-icon-close {
transform: scale(1.5);
cursor: pointer;
}
</style>
<script>
$(document).ready(function () {
$("input[type=checkbox]").removeAttr("checked");
$("#projects").tabs();
$("ul").sortable({ axis: "x", containment: "#projects" });
$("ol").sortable({ axis: "y", containment: "#projects" });
/*
기존에 존재한 엘리먼트에 대해서만 이벤트가 적용
새로 추가된 엘리먼트에 대해서는 적용이 안됨
$("input[type=checkbox]").click(function () {
$(this)
.closest("li")
.slideUp(function () {
$(this).remove();
});
});
*/
/*
$("input[type=checkbox]").on("click", function () {
$(this)
.closest("li")
.slideUp(function () {
$(this).remove();
});
});
*/
$("#projects").on("click", "input[type=checkbox]", function () {
$(this)
.closest("li")
.slideUp(function () {
$(this).remove();
});
});
$("#projects").on("click", "span .ui-icon-close", function () {
var index = $(this).closest("li").index();
var id = $("#main li:eq(" + index + ") a").attr("href");
$("#main li:eq(" + index + ")").remove();
$(id).remove();
$("#projects").tabs("refresh");
});
$("#btnAddTask")
.button()
.click(function () {
$("#task-dialog").dialog({
width: 400,
resizable: false,
modal: true,
buttons: {
"Add new task": function () {
$("#projects").tabs("refresh");
var activeTab = $("#projects").tabs("option", "active");
//alert(activeTab);
//var title = $("#main > li:nth-child(1) > a").attr("href");
var title = $(
"#main > li:nth-child(" + (activeTab + 1) + ") > a"
).attr("href");
//alert(title);
$("#projects " + title).append(
"<li><input type='checkbox' />" +
$("#new-task").val() +
"</li>"
);
$("#new-task").val("");
$(this).dialog("close");
},
Cancel: function () {
$("#new-task").val("");
$(this).dialog("close");
},
},
});
});
$("#btnAddProject")
.button()
.click(function () {
$("#project-dialog").dialog({
width: 400,
resizable: false,
modal: true,
buttons: {
"Add new Project": function () {
var projectName = $("#new-project").val();
var replaceName = projectName.split(" ").join("_");
$(
"<li><a href='#" +
replaceName +
"'>" +
projectName +
"</a><span class='ui-icon ui-icon-close'></span></li>"
).appendTo("#main");
$(" <ol id='" + replaceName + "'></ol>")
.appendTo("#projects")
.sortable();
$("#projects").tabs("refresh");
var tabCount = $("#projects .ui-tabs-nav li").length;
$("#projects").tabs("option", "active", tabCount - 1);
$("#new-project").val("");
$(this).dialog("close");
},
Cancel: function () {
$("#new-project").val("");
$(this).dialog("close");
},
},
});
});
});
</script>
</head>
<body>
<div id="container">
<h2>To Do List</h2>
<button id="btnAddProject">Add Project</button>
<div id="projects">
<ul id="main">
<li>
<a href="#personal">Personal</a
><span class="ui-icon ui-icon-close"></span>
</li>
<li>
<a href="#work">Work</a><span class="ui-icon ui-icon-close"></span>
</li>
</ul>
<ol id="personal">
<li><input type="checkbox" />Doctor apointment</li>
<li><input type="checkbox" />Call the plumber</li>
</ol>
<ol id="work">
<li><input type="checkbox" />Complete test case document</li>
<li><input type="checkbox" />Meet project manager</li>
<li><input type="checkbox" />Record jQeury video</li>
</ol>
</div>
<button id="btnAddTask">Add Task</button>
<div id="project-dialog" title="Add a project" style="display: none">
<label for="new-project">Project name:</label>
<input type="text" id="new-project" />
</div>
<div id="task-dialog" title="Add a task" style="display: none">
<label for="new-task">Task name:</label>
<input type="text" id="new-task" />
</div>
</div>
</body>
</html>
'FrontEnd > Jquery' 카테고리의 다른 글
| jQuery UI Project: To Do List Application (0) | 2023.08.05 |
|---|---|
| How to Add, Edit, Delete, Update data in table using JQuery (0) | 2023.08.04 |
