jQuery-ui
jquery 의 기반의 사용자 인터페이스를 좀 더 쉽게 만들 수 있게 도와준다.
시작하기전에
- 선행 준비jQuery-ui 다운로드 ( https://code.jquery.com/ui/1.12.1/jquery-ui.min.js )
- jQuery 다운로드 ( https://code.jquery.com/jquery-3.3.1.min.js )
- 파일 구조
# jqeryui-pratice - index.html - js -- jquery-3.3.1.min.js -- jquery-ui.min.js- index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/jquery-3.3.1.min.js"></script> <script src="./js/jquery-ui.min.js"></script> <title>Trello</title> </head> <body> </body> </html>
Interaction
총 5가지의 Interaction 이 있다.
DraggableDroppableResizableSelectableSortable
이 중에서 다음 프로젝트 ( Trello Clone Project ) 에서 사용할 Interaction 은 Sortable 이다.
간단한 예제로 Sortable 옵션을 공부해보자
Sortable
마우스를 사용하여 목록이나 격자의 요소를 재정렬할 수 있게 해준다.
기본 사용 예제
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/jquery-3.3.1.min.js"></script> <script src="./js/jquery-ui.min.js"></script> <style> #sortable__list1 { list-style: none; padding: 0; width: 250px; border: 2px dashed #5AAC44; } #sortable__list1 > .sortable__el { background-color: #fff; padding: 5px; border: 2px solid #000; margin: 5px; } #sortable__list2 { list-style: none; padding: 0; width: 250px; border: 2px dashed red; } #sortable__list2 > .sortable__el { background-color: #fff; padding: 5px; border: 2px solid #000; margin: 5px; } </style> <title>Trello</title> </head> <body> <h1>Sortable Example</h1> <h3>sortable__list1</h3> <ul id="sortable__list1"> <li class="sortable__el">list One</li> <li class="sortable__el">list Two</li> <li class="sortable__el">list Three</li> <li class="sortable__el">list Four</li> <li class="sortable__el">list Five</li> </ul> <script> $("#sortable__list1").sortable(); </script> </body> </html> $("#sortable__list1").sortable();
#sortable__list1 의 자식 요소들을 마우스를 통해 재 정렬할 수있게 된다.
연결 리스트
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/jquery-3.3.1.min.js"></script> <script src="./js/jquery-ui.min.js"></script> <style> .sortable__cover { float: left; margin-right: 15px; } .sortable__list { min-height: 10px; list-style: none; padding: 0; width: 250px; } #sortable__list1 { border: 2px dashed #5AAC44; } #sortable__list2 { border: 2px dashed red; } .sortable__el__white { background-color: #fff; padding: 5px; border: 2px solid #000; margin: 5px; } .sortable__el__black { background-color: #000; color: #fff; padding: 5px; border: 2px solid #000; margin: 5px; } </style> <title>Trello</title> </head> <body> <h1>Sortable Example</h1> <div class="sortable__cover"> <h3>sortable__list1</h3> <ul id="sortable__list1" class="sortable__list connectedSortable"> <li class="sortable__el__white">list One</li> <li class="sortable__el__white">list Two</li> <li class="sortable__el__white">list Three</li> <li class="sortable__el__white">list Four</li> <li class="sortable__el__white">list Five</li> </ul> </div> <div class="sortable__cover"> <h3>sortable__list2</h3> <ul id="sortable__list2" class="sortable__list connectedSortable"> <li class="sortable__el__black">list One</li> <li class="sortable__el__black">list Two</li> <li class="sortable__el__black">list Three</li> <li class="sortable__el__black">list Four</li> <li class="sortable__el__black">list Five</li> </ul> </div> <script> $("#sortable__list1, #sortable__list2").sortable({ connectWith: ".connectedSortable", }); </script> </body> </html> connectWith: ".connectedSortable"
두 리스트간의 엘리먼트를 공유할 수 있다.
Drop placeholder
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/jquery-3.3.1.min.js"></script> <script src="./js/jquery-ui.min.js"></script> <style> .sortable__cover { float: left; margin-right: 15px; } .sortable__list { min-height: 10px; list-style: none; padding: 0; width: 250px; } #sortable__list1 { border: 2px dashed #5AAC44; } .sortable__el__white { background-color: #fff; padding: 5px; border: 2px solid #000; margin: 5px; } .list-placeholder{ box-sizing: border-box; width: 240px; height: 35px; background: #f0f0f0; border: 1px dashed #000; margin: 5px; } .handle { display: inline-block; vertical-align: center; background: #e0e0e0; border: 1px solid #000; padding: 3px; margin-right: 10px; } </style> <title>Trello</title> </head> <body> <h1>Sortable Example</h1> <div class="sortable__cover"> <h3>sortable__list1</h3> <ul id="sortable__list1" class="sortable__list connectedSortable"> <li class="sortable__el__white"><span class="handle">handle</span>list One</li> <li class="sortable__el__white"><span class="handle">handle</span>list Two</li> <li class="sortable__el__white"><span class="handle">handle</span>list Three</li> <li class="sortable__el__white"><span class="handle">handle</span>list Four</li> <li class="sortable__el__white"><span class="handle">handle</span>list Five</li> </ul> </div> <script> $("#sortable__list1").sortable({ handle : ".handle", placeholder: "list-placeholder" }); </script> </body> </html> placeholder: "list-placeholder"
자식요소가 놓일 자리에 스타일을 줄 수 있다.
handle : ".handle"
.handle 을 통해서만 요소를 움직일 수 있다.
다음시간에
앞서 정리한 jquery-ui 옵션을 가지고 일정관리 어플리케이션인 Trello를 만들어 보자.
'Study > ETC' 카테고리의 다른 글
| Clojure로 LISP 톺아보기 (2) - Symbol 과 함수 (0) | 2019.05.21 |
|---|---|
| Clojure로 LISP 톺아보기 (1) - 데이터 구조 (0) | 2019.05.20 |
| [개발]예측 데이터 그래프(Dygraph) (0) | 2019.01.22 |
| [개발이슈]bxSlider height 0 이슈 (0) | 2019.01.08 |
| [개념잡기] D3JS 기본 개념 및 API (1) | 2018.09.18 |
