[JAVA 개발] jqueryUI를 이용한 그룹버튼 & 콤보박스 만들기

jqueryui 를 사용하기 위해서는 먼저 이전 글을 통해 ui다운로드 및 세팅을 해주셔야 합니다.

 

[JAVA 개발] jqueryUI 사용법 및 버튼태그 UI적용  페이지를 참고하세요.

 

radio 태그에 UI를 적용하여 그룹 버튼을 만들어보도록 하겠습니다.

먼저 HTML소스를 작성해보겠습니다.

	    Group1
	    Group2
	    Group3
	

 

HTML 소스에서 radio태그의 id와 label의 for 속성값이 일치해야 합니다.

이상태로 페이지를 실행하였을때는 기존 라디오 버튼과 동일한 실행결과가 보여집니다.

 

 

여기서 스크립트 코드와 include 파일소스를 기재해주시면 정상적으로 UI가 적용됩니다.

 

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> 

 

스크립트 소스

 

 

소스 작성을 완료한뒤에 실행화면을 보게되면 정상적으로 UI가 적용된 화면을 확인하실수 있습니다.

 

다음으로는 콤보박스(selectbox)UI를 적용해 보도록 하겠습니다.

동일하게 HTML소스를 적용한뒤에 실행해보도록 하겠습니다.

 

HTML소스

     첫번째     두번째     세번째

 

실행시에는 UI가 적용되지 않은 기본 selectbox가 보여집니다.

 

스크립트소스 를 추가하게되면 selectbox UI가 적용됩니다.

 

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

 

 

적용시 글자가 짤려서 보여지게 될경우가 있으니 width가 좁을경우 기존소스에서

{width:200} 에 대한 속성을 함수내에 정의해주시면 됩니다.

 

$("#selectmenu").selectmenu({width : 200});

 

 

실행화면을 통해 원하는 넓이에 화면이 정상 출력됨을 확인하였습니다.