CSS 및 JQuery를 사용하여 간단한 작업 관리 목록을 작성하는 방법을 학습합니다. 먼저 할 일 목록을 디자인합니다.이 작업은 하루 동안 작업을 빠르게 추가 할 수 있는 간단한 형태입니다. 그런 다음이 목록을 가져 와서 해당 항목을 스티커 메모로 바꾸는 방법을 배우고 이 정보를 그래픽 방식으로 표시하여 기억하는 데 도움이됩니다. 이것은 단순한 양식이므로 이 데이터를 데이터베이스에 저장하거나 쿠키를 사용하여 이 데이터를 저장하지 않으므로 브라우저를 닫고 목록을 계속 사용할 수 있습니다. 바라건대 이것은 할 일 목록 응용 프로그램을 만드는 과정을 시작할 것입니다.
웹앱 할일 목록
웹앱은 이제 휴대 전화 앱과 함께 인기가 높아졌습니다. 이들은 특정 작업을 수행하기위한 1 비트 기능을 제공하는 작은 프로그램입니다. 현재 할 일 목록을 만들 수있는 수많은 웹 앱이 있습니다. 가장 큰 것들은 다음과 같습니다.
Remember The Milk
Evernote
Springpad
이 프로그램을 사용하면 여러 목록을 만들 수 있고, 때로는 매일해야 할 일 목록이 있어서 오늘 완료해야 할 작업을 알수 있습니다. 이 튜토리얼에서는 이를 수행하는 방법에 대해 보여줍니다.
할 일 목록에서 스티커 메모
해야 할 일을 기억하는 데 도움이되는 그래픽 방식으로 이러한 작업을 표시 할 수 있도록 To-Do에서 스티커 메모를 작성하려고합니다. 또한 새로운 CSS 애니메이션을 사용하여 멋진 스티커 메모를 만드는 방법을 보여줄 것입니다.
할 일 목록 만들기
가장 먼저해야 할 일은 작업 목록을 만드는 것인데, 목록에 새 작업을 추가하는 데 사용할 양식이기도합니다. 작업 테이블이 포함되어 있으며, 각 작업은 텍스트 상자에 있으므로 작업을 편집 할 수 있습니다. 양식 끝에는 새 작업 행을 추가하는 단추와 업데이트 된 목록에서 스티커 메모를 새로 고치는 단추가 두 개 있습니다.
할 일 목록 HTML
먼저 제목과 설명이라는 두 개의 열이 있는 테이블을 만듭니다. 그런 다음 각 작업에 제목과 설명을 제공하여 다음 행에 작업을 추가 할 수 있습니다. 표 아래에 두 개의 단추를 추가하여 하나는 새 행을 추가하고 다른 하나는 스티커 메모를 새로 고칩니다.
<table class="newTasks" id="newTasks">
<tr><th>Title</th><th>Description</th><th></th></tr>
<tr><td><input type="text" id="title-1" value="Get Milk" /></td><td><input type="text" id="description-1" value="Need to go shopping to pick up milk." /></td><td><a class="deleteButton" id="delete-1" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-2" value="Pay Bills" /></td><td><input type="text" id="description-2" value="Gas and electric bills due soon." /></td><td><a class="deleteButton" id="delete-2" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-3" value="Take Dogs To Vets" /></td><td><input type="text" id="description-3" value="Dog needs taking to vets for injection." /></td><td><a class="deleteButton" id="delete-3" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-4" value="Record Tv Program" /></td><td><input type="text" id="description-4" value="Saving Private Ryan on tv make sure you record it." /></td><td><a class="deleteButton" id="delete-4" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-5" value="Go Doctors" /></td><td><input type="text" id="description-5" value="Doctors appointment is tomorrow!" /></td><td><a class="deleteButton" id="delete-5" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-6" value="Car Insurance" /></td><td><input type="text" id="description-6" value="Car insurance due end of the month." /></td><td><a class="deleteButton" id="delete-6" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-7" value="Go Dentist" /></td><td><input type="text" id="description-7" value="Dentist appointment is next Week. Make sure you bruch them teeth!" /></td><td><a class="deleteButton" id="delete-7" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-8" value="Home Insurance" /></td><td><input type="text" id="description-8" value="House insurance finishes tomorrow don't burn the place down." /></td><td><a class="deleteButton" id="delete-8" title="Delete Task">X</a></td></tr>
</table>
<p><input type="button" id="addNew" value="Add" /></p>
<p><input type="button" id="refreshNotes" value="Refresh Sticky Notes" /></p>
각 행의 각 입력에는 ID가 제공되어야 하는데, jQuery에서 값을 가져 오는 것이 무엇인지 알고 있으므로 나중에 수행합니다.
할 일 목록 CSS
테이블에서 해야 할 유일한 CSS는 입력 상자의 크기를 늘리고 테이블 주위에 멋진 테두리를 두는 것입니다.
.newTasks{
padding:3px;
border:1px solid #888;
-moz-border-radius:3px;
-webkit-border-radius: 3px;
border-radius:3px;
}
.newTasks input[type=text] { width:300px; padding:3px };
할일 목록 JQuery
이제 테이블의 기능을 설정하고 테이블의 기능과 두 개의 버튼을 만들 수 있습니다. 테이블에 필요한 유일한 jQuery는 To-Do 목록에서 행 (작업)을 삭제하는 것입니다. 각 행에는 X를 포함하는 링크가 있으며 이는 행을 삭제하는 데 사용할 것입니다. 이 X에 onclick 이벤트를 넣어야 부모 행이 삭제됩니다. 모든 삭제 링크에는 클래스가 있으므로 이 클래스에 클릭 이벤트를 배치 할 수 있으며 이 클래스의 모든 항목은 동일한 클릭 이벤트를 사용합니다.
//Function which runs on page load
$(document).ready(function(){
//Delete button click event
$('.deleteButton').click(function(){
deleteRow($(this));
});
});
/**
* Deletes the grandparent of the delete button
*/
function deleteRow(thisButton){
thisButton.parent().parent().remove();
}
X 버튼을 클릭하면 클릭 한 버튼을 가져 와서이 객체를 deleteRow 함수로 보내 객체의 부모의 부모를 가져 와서 제거합니다. 이 예제에서는 테이블의 전체 행입니다. 이제 새 행 추가 버튼과 새로 고침 목록 버튼을 클릭 할 때 발생하는 상황을 코딩 할 수 있습니다. 행 추가 버튼의 경우 테이블에 새 행을 추가하고 행에 입력 상자를 포함하여 할 일 목록에 작업을 추가 할 수 있습니다.
//Function which runs on page load
$(document).ready(function(){
//Add button click event
$('#addNew').click(function(){
addNewRow();
});
//Delete button click event
$('.deleteButton').click(function(){
deleteRow($(this));
});
});
/**
* Click event function to append a new row to the tasks table
*/
function addNewRow(){
var numRows = $('#newTasks tr').length;
$('#newTasks').append('<tr><td><input type="text" id="title-'+numRows+'" /></td><td><input type="text" id="description-'+numRows+'" /></td></tr>');
}
/**
* Deletes the grandparent of the delete button
*/
function deleteRow(thisButton){
thisButton.parent().parent().remove();
}
이제 삭제 및 추가 버튼이 작동하여 기본 기능을 추가하고 스티커 메모를 만들 수 있습니다. 버튼 새로 고침 스티커 메모가 사라집니다. 할 일은 작업 목록에있는 모든 것을 가져 와서 반복하고 제목과 설명이 포함 된 목록에 목록 항목을 추가하는 것입니다. 그런 다음 CSS를 사용하여 스타일을 지정해야합니다. 아래는 새로 고침 노트 ID에 새로운 클릭 이벤트를 추가하는 웹 앱의 최종 Javascript입니다.
클릭하면 refreshNotes 함수가 실행됩니다. 이 기능은 먼저 기존의 모든 스티커 메모를 제거하여 다시 작성할 수 있습니다. 그런 다음 작업 목록 테이블에서 모든 행을 가져 와서 JQuery each 함수를 사용하여 반복합니다. 각 행마다 제목 입력 상자를 찾아 값을 가져온 다음 설명 입력 상자 값을 가져 와서 이 두 값을 가져 와서 메모 작성 기능으로 전달합니다.
노트 작성 기능은 헤더를 가져 와서 h2 태그에 넣은 다음 설명을 가져 와서 단락에 넣습니다. 다음으로 선택할 수있는 색상 목록을 제공합니다. 각 색상은 나중에 자습서에서 설정할 CSS 클래스입니다. 그런 다음 제목 헤더와 설명 단락이있는 sticky_notes 클래스에 새 목록 항목을 추가합니다.
//Function which runs on page load
$(document).ready(function(){
//Add button click event
$('#addNew').click(function(){
addNewRow();
});
//Refresh notes button click event
$('#refreshNotes').click(function(){
refreshNotes();
});
//Delete button click event
$('.deleteButton').click(function(){
deleteRow($(this));
});
});
/**
* Click event function to append a new row to the tasks table
*/
function addNewRow(){
var numRows = $('#newTasks tr').length;
$('#newTasks').append('<tr><td><input type="text" id="title-'+numRows+'" /></td><td><input type="text" id="description-'+numRows+'" /></td></tr>');
}
/**
* Click event function to start the creation of the task sticky notes
* Get each of the rows in the task list and create a sticky note for each of them
*/
function refreshNotes(){
var tableRows = $('#newTasks tr');
$('.sticky_notes li').remove();
$.each(tableRows,function(i){
var title = $(this).find('input[id^="title"]').val();
var description = $(this).find('input[id^="description"]').val();
if(title != undefined && description != undefined){
createNotes(title, description);
}
});
}
/**
* Creates the sticky notes and gives it a random colour.
*/
function createNotes(title, description){
var header = '<h2>'+title+'</h2>';
var desc = '<p>'+description+'</p>';
var colours = new Array();
colours[0] = 'green';
colours[1] = 'blue';
colours[2] = 'yellow';
colours[3] = 'red';
colours[4] = 'purple';
colours[5] = 'orange';
$('.sticky_notes').append('<li class="'+colours[randomFromTo(0,(colours.length - 1))]+'">'+header+description+'</li>');
}
/**
* Get a random number between 2 numbers
*
* @return Randon Number
*/
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
/**
* Deletes the grandparent of the delete button
*/
function deleteRow(thisButton){
thisButton.parent().parent().remove();
}
이제 새 작업을 새로 추가하고 작업을 삭제하며 테이블의 작업에서 목록을 생성 할 수 있습니다. 이제 스티커 메모처럼 보이도록 스타일을 지정할 수있는 작업 목록을 생성 할 수 있습니다. 보너스로 CSS3에서 선택한 스티커 메모를 확대하는 트릭을 보여 드리겠습니다. 먼저 목록 항목을 추가 할 목록을 만들어야합니다.
<ul class="sticky_notes"> </ul>
목록 항목이 여기에 들어가므로 이제 스티커 메모처럼 보이도록 스타일을 지정할 수 있습니다.
스티커 메모 CSS
먼저 스티커 메모처럼 목록 항목을 상자로 바꿔야합니다. 목록 스타일을 끄고 목록 항목의 너비와 높이를 지정하여 목록 항목의 스타일을 지정하십시오.
ul.sticky_notes{ list-style:none; }
ul.sticky_notes li{
width:250px;
height:200px;
padding:20px;
margin:20px;
float:left;
}
필기 노트처럼 보이게하려면 모든 노트가 분리 된 다음 목록 항목 내의 텍스트 글꼴을 변경해야합니다. Google Font API로 이동하여 웹 앱에 포함 할 멋진 필기체 글꼴을 검색하십시오. Short Stack으로 갔으므로 목록 항목의 글꼴 모음을 추가하기 전에 헤드 HTML에 다음을 추가해야합니다.
<link href='http://fonts.googleapis.com/css?family=Short+Stack' rel='stylesheet' type='text/css'>
ul.sticky_notes{ list-style:none; }
ul.sticky_notes li{
width:250px;
height:200px;
padding:20px;
margin:20px;
float:left;
font-family: 'Short Stack', cursive;
}
그러나 스티커 메모는 메모가 날아갈 때마다 똑바로 보이지 않습니다. CSS를 사용하여 상자를 기울일 수 있습니다.
ul.sticky_notes li{
width:250px;
height:200px;
padding:20px;
margin:20px;
float:left;
-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
-webkit-transform:rotate(-6deg);
-o-transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
font-family: 'Short Stack', cursive;
}
이제 모든 스티커 메모가 기울어졌지만 메모와 함께 발생하지 않는 모든 메모는 동일하므로 조금 변경하고 모든 홀수 항목을 변경 한 다음 임의의 항목을 다른 각도로 변경하십시오.
ul.sticky_notes li:nth-child(odd){
-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
position:relative;
top:5px;
}
ul.sticky_notes li:nth-child(2n){
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
position:relative;
top:-5px;
}
ul.sticky_notes li:nth-child(6n){
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
position:relative;
top:-10px;
}
스티커 메모는 모두 다른 색상이 될 수 있습니다. 이 튜토리얼의 첫 번째 부분에서 스티커 메모에 대해 임의로 선택되는 색상 목록을 작성하고 이제이 스티커 메모에 대한 CSS를 만들 수 있습니다.
.yellow{ background:#ffc; }
.green{ background:#cfc; }
.blue { background:#ccf; }
.red{ background:#f24a4a; }
.purple{ background:#eaafe3; }
.orange{ background:#f28e50; }
이제 완료된 작업 관리 목록이 작성되어 여러 스티커 메모를 생성하여 화면에 표시 할 수 있습니다. 우리는 여전히 인터페이스를 향상시킬 수 있습니다. 스티커 메모를 사용하여 메모를 선택할 수 있습니다.
이 튜토리얼에서는 CSS를 사용하여 마우스를 가져 가면 노트를 확대하는 방법을 보여줍니다. 이것은 스케일의 CSS3 속성을 사용하며, 호버 이벤트를 배치하면 요소의 크기가 증가합니다.
그러나 요소를 확대하면 요소의 z- 색인을 변경하고 요소의 그림자를 증가시켜 다른 요소 위로 나오는 것처럼 보이게해야합니다. 그런 다음이 호버 이벤트에 전환 애니메이션을 추가하여 부드럽게 축소합니다.
ul.sticky_notes li:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
position:relative;
z-index:10;
-moz-box-shadow:0px 10px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,.7);
box-shadow:0px 10px 7px rgba(0,0,0,.7);
-webkit-transition: all 300ms ease-in 50ms; /* property duration timing-function delay */
-moz-transition: all 300ms ease-in 50ms;
-o-transition: all 300ms ease-in 50ms;
transition: all 300ms ease-in 50ms;
cursor:pointer;
}
더 나아 가기
웹 응용 프로그램 할 일 목록을 완성한 것이지만, 분명히 일상 생활에서 사용하기에 실용적이지 않을 것입니다. 이 튜토리얼은 개발을 더 발전시키고 원하는 것을 정확하게 만드는 발판입니다. 어떤것들 개선해야 할까요?
업데이트 할 때 마다이 할 일 목록을 데이터베이스에 저장할 수 있기를 원합니다. 이렇게하면 브라우저를 닫을 수 있고 모든 것이 떠날 때와 동일합니다. 데이터베이스가 있으면 여러 목록이 생길 수 있습니다. 작업 목록과 스티커 메모에서 페이지를 분할하여 필요할 때 화면에 메모를 표시 할 수도 있습니다.
스티커 메모를 드래그 앤 드롭으로 향상 시켜서 움직일 수 있고 조금 더 상호 작용할 수 있습니다. 스티커 메모에 완료된 버튼이 있으면 여기서 작업을 제거 할 수 있습니다. 해야할 일 목록을 우선 순위별로 재정렬하면 올바른 순서로 작업을 수행 할 수 있습니다.
이 앱에 어떤 기능을 추가 하시겠습니까? 이 기능의 데모를 확인하십시오. 코드를 올바르게 복사하면 앱이 정확히 동일하게 작동해야합니다.
'SW > JavaScript' 카테고리의 다른 글
| HTML, JavaScript, jQuery : CSS(스타일 시트)간 전환 방법 : 예제, 구현 (0) | 2020.03.16 |
|---|---|
| HTML, CSS, JavaScript, JQuery : 간단한 모달 상자를 만드는 방법 : 예제, 구현 (0) | 2020.03.15 |
| Java Script : jQuery : 나이 제한 걸기, 날짜 데이터 검증 : 방법, 예제 (0) | 2020.03.13 |
| JS : jQuery : 각 XML 노드 처리 : 방법, 예제 (0) | 2020.03.12 |
| JS : jQuery : 체크박스 선택 여부 확인 방법 : 예제, 방법 (0) | 2020.03.11 |