[JAVA 개발] jqueryUI 사용법 및 버튼태그 UI적용

jqueryUI는 jquery를 이용하여 UI컴포넌트를 함수호출만으로 제작해주는 UI프레임워크 입니다.

무료이며, 쉽게 적용이 가능합니다.

http://jqueryui.com/themeroller/ 로 접송하여  Gallery 탭을 선택한 후 자신이 원하는 테마를 클릭!

Download 버튼을 클릭해주시면 됩니다.

 

 

Download 버튼을 클릭해주시며 페이지가 이동되며, 아래로 내려보시면 다운로드 버튼과 자신이 정한

테마명이 보이게 됩니다.

다운로드 버튼을 눌러 해당 파일을 다운로드 한뒤에 압축을 풀어 줍니다.

 

 

해당 파일을 보시면 아래와 같이 파일들이 정렬되어 있는데 빨간색으로 표시한 파일들만 자신이 만든

프로젝트 경로에 복사해줍니다.

 

저는 프로젝트 안에 resources/jqueryui 폴더를 생성하여 해당 경로에 넣었습니다.

 

 

이제 소스 적용 및 버튼 태그를 ui에 적용시켜 보도록 하겠습니다.

 

먼저 jqueryui 연동에 필요한 include 코드등록

 

<link href="/resources/jqueryui/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/resources/jqueryui/jquery-ui.js"></script>

 

 

스크립트 코드 등록

 

 <script>
 $(function(){
  $("#buttontest").button();
 });
</script>

 

 

html 코드 등록

 

<button id="buttontest">버튼샘플</button>

 

모든작업이 종료되었습니다. 실행화면을 확인해 코드가 정상적으로 적용되었는지 확인해보도록 하겠습니다.

마우스가 있을때와 없을때의 색상 차이가 확인됩니다.

마음에 들지 않을경우에는 처음 디자인을 다른디자인으로 변경하여 작업하시면 됩니다.

 

 

감사합니다.