jQueryUI는 jQuery를 이용하여 UI 컴포넌트를 함수호출만으로 제작을 해주는 UI 프레임워크입니다.
무료이면서 쉽게 적용할 수 있다는 장점이 있습니다.
그럼 우선 연동 전 jQueryUI 파일을 다운로드 받도록 하겠습니다.
http://jqueryui.com/themeroller/
위 페이지 접속을 하셨다면 "Gallery" 탭 선택 후 원하시는 테마를 클릭하시면
우측 컴포넌트들이 선택하신 테마로 적용이 됩니다.
테마를 확인 하신 다음 마음에 드시는 테마가 있으시다면
클릭하신 테마하단에 "Download" 버튼이 있는데 클릭을 해줍니다.
확인해보니 총 24종류의 테마를 제공해주고 있네요.
그럼 페이지 이동이 될텐데 스크롤을 끝까지 내려줍니다.
그럼 위 처럼 Download버튼이 존재하는데
클릭을 해주시면 최종파일이 다운로드 됩니다.
다운로드 후 압축파일을 해제하신 다음
아래 파일들을 자신의프로젝트 경로에 맞춰서 INCLUDE 해주도록 합니다.
저의경우 jqueryui 디렉토리 생성하여 해당폴더내에 include 해주었습니다.
그럼 이제 html 페이지를 하나 만들어서 연동코드를 작성해보도록 하겠습니다.
제일먼저, 필요파일을 INCLUDE 해보도록 하겠습니다.
※ external 디렉토리내에 존재하는 jquery파일을 include 해주는것이 깔끔하지만
저는 jquery cdn을 include 하였습니다.
jQueryUI 연동에 필요한 include 코드
1 2 3 4 | .<link href="/jqeryui/jquery-ui.css" rel="stylesheet"><script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script src="/jqeryui/jquery-ui.js"></script> |
버튼컴포넌트 적용테스트를 위한 HTML 버튼태그
1 | <button id="button_sample">버튼샘플</button> |
버튼 태그에 대한 코드를 작성하셨다면
이제 jquery로 button() 함수를 아래와 같이 호출하면
버튼 UI가 적용이 될것입니다.
onload 후 button() 함수 호출
1 2 3 | $(function(){ $("#button_sample").button(); }) |
실행을 해보도록 하겠습니다.
jQueryUI 연동테스트 실행결과
버튼ui가 다운로드받은 테마형태로 출력이 되었다면
연동이 정상적으로 이루어 진 것입니다.
다음 포스팅에는 jQueryUI에서 제공하는 폼UI를 시작으로
레이어 및 기능구현에 대해서 내용을 다루도록 하겠습니다.
by 개발로짜
'웹개발강좌 > jQueryUI' 카테고리의 다른 글
| jQueryUI 5장 - sortable을 이용하여 목록순서 변경하기 (0) | 2014.11.07 |
|---|---|
| jQueryUI 4장 - autocomplete 함수를이용하여 Ajax 비동기 자동완성 구현해보기 (9) | 2014.11.06 |
| jQueryUI 3장 - 다양한 레이아웃을 만들어보자(어코디언,탭,레이어팝업) (0) | 2014.11.05 |
| jQueryUI 2장 - 다양한 입력태그에 달력,스피너,슬라이더 등 각종 UI 적용해보기 (0) | 2014.11.04 |