jQueryUI 이용 방법
1. jQueryUI 기본 구조
컴포넌트 |
개요 |
interactions |
드래그&드롭, 크기 조정 등 마우스를 사용한 대화 조작 |
widgets |
아코디언 패널, 대화상자, 메뉴 등 |
Effects |
jQuery의 효과를 확장 |
2. jQueryUI 페이지의 기본 구조
- <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css"/>
- 해당 부분은 테마의 이름을 나타낸다(용도에 따라 변함)
3. jQueryUI 실행에 필요한 파일
파일 |
개요 |
jquery-1.11.0.min.js |
jQuery( 별도로 다운로드) |
/js/jquery-ui-1.10.4.custom.min.js |
jQueryUI |
/css/redmond/jquery-ui-1.10.4.custom.min.css |
스타일 시트 |
/css/redmond/images 폴더 | 이미지 파일들 |
4. jQueryUI 표준 테마
-black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, redmond......
- jquery themeroller 라는 어플에서 실행해 볼수 있다
5. jquery themeroller 이용
1) https://jqueryui.com/themeroller/ 접속
2) gallery 선택
- 자신이 만들고자 하는 테마에 맞는 것을 선택한다
3) Roll your own 으로 세세한 부분을 작성
- 폰트, 스타일 등...
4) download 버튼을 클릭한다
- download 할시 각종 버전과 테마를 최종적으로 선택
- 패키지가 다운로드 된다
'Front-End > jQueryUI' 카테고리의 다른 글
| [jQueryUI] 위젯위치 제어 - position 매개변수 (0) | 2017.01.18 |
|---|---|
| [jQueryUI] jQueryUI 표준 아이콘 세트 이용하기 (0) | 2017.01.16 |
| [jQueryUI] 드랍 요소 제어하기 - droppable[accept, scope] (0) | 2017.01.12 |
| [jQueryUI] 드래그 드랍 지정하기 - draggable(), droppable() (0) | 2017.01.12 |
| [jQueryUI] 드래그로 여러항목 선택 - selectable() (0) | 2017.01.12 |
리딩리드