jQueryUI 시작하기 - 다운로드부터 버튼출력까지

jQuery로 스크립트 및 화면제어가 가능하지만 ..

추가로 UI를 이용하고 싶다면 jQueryUI를 이용해서 개발에 이용하면 좋을 것 같다

우선은 사이트에 가서 다운로드를 받아봅시다.

http://jqueryui.com/download/

위 화면과 같이 나오는데 다운로드 받고자 하는 version 체크를 해주고 아래로

스크롤을 쭉~ 내린다 .

그럼 다음화면처럼 테마 지정하고 다운로드 하는 버튼이 보이는데

만약 테마를 선택하긴 하겠는데 미리 해당 테마의 종류를 보고 싶다고 하시면 

다운로드 받은 압축파일을 해제 하면 몇가지폴더와 index.html이 나오는데 

실직적으로 필요한 것은 css/js폴더이다.

development-bundle -> demos 폴더내에 샘플 소스들이 아주 잘 나와있다.

그리고 추가적으로 로컬에서 볼수있는 api문서도 파일로 있음!

하지만, jQuery플러그인 소개인것처럼 demo 소스들을 기반으로 더욱 심플하게 

샘플링을 해보고자 한다.

이번장에서는 BUTTON UI를 띄워보도록 하겠다.

우선은 압축푼 CSS/JS폴더를 프로젝트내에 넣어두자

본인은 위 폴더들을 jqueryui라는 폴더생성하여 그 안에 넣어두었다.

현재까지 나온버전은 어짜피 jquery 1.6이상 이므로 자체적으로 jQueryUI내에 

존재하는 jquery 버전을 사용해도 무관함

cdn으로 include해도 상관없지만 자체적으로 jquery 1.10을 넣어줬으므로 

1.10버전으로 사용하도록 하겠음.

자~ css1개와 js파일 2개를 html 페이지에 include를 해보자

<link href="/jqueryui/css/start/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="/jqueryui/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/jqueryui/js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>

샘플링에서 버튼태그를 생성할때 <button> 태그를 이용하였으나, 

본인은 <input type="button"/> 태그를 이용하였음

결과는 똑같더라...

html 코드

<input type="button" id="button" value="버튼샘플" />

스크립트 코드

$(function(){
	$("#button").button();
})

html자체적으로 버튼 태그 생성후 onload할때 .button() 함수를 

호출해주면 버튼에 UI가 입혀진다.

함수 호출전 화면

함수 호출후 화면

오 UI적으로도 깔끔해지고 사이즈도 더 커졌다!! +_+ ㅋ

앞으로 jQueryUI에서 제공하는 몇가지를 소개해보도록 하겠음