jQuery로 스크립트 및 화면제어가 가능하지만 ..
추가로 UI를 이용하고 싶다면 jQueryUI를 이용해서 개발에 이용하면 좋을 것 같다
우선은 사이트에 가서 다운로드를 받아봅시다.
위 화면과 같이 나오는데 다운로드 받고자 하는 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에서 제공하는 몇가지를 소개해보도록 하겠음
모달창을 띄우고 싶다면 jQueryUI의 DIALOG 함수를 이용해보자 (0) | 2014.06.20 |
---|---|
jQueryUI에서 제공하는 Accordion을 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 지원하는 달력 컴포넌트를 이용하여 TEXT태그에 값넣어보기 (0) | 2014.06.19 |
jQueryUI를 이용하여 자동완성 구현하기(2) - Ajax 비동기통신 (7) | 2014.06.19 |
jQueryUI를 이용하여 자동완성기능을 제작해보자 - (1) (0) | 2014.06.19 |