이번 포스팅은 각종 입력태그에 jQueryUI를 적용하여 UI를 적용해보도록 해보도록 하겠습니다.

다루어볼 UI종류 : 버튼/그룹버튼/콤보박스/스피너/슬라이더/달력(datepicker)

각종 상세 옵션에 대해서는 이후에 차근차근 다루어 보도록 하겠습니다.

버튼UI 적용

A태그,BUTTON태그, INPUT TYPE="BUTTON"태그 모두 버튼UI 적용이 가능합니다.

한번 각 HTML태그를 작성한 후 버튼UI를 적용해보도록 하겠습니다.

<h3>버튼UI</h3>
<button id="button_sample1">button버튼</button>
<br/><br/>
<input type="button" id="button_sample2" value="input버튼" />
<br/><br/>
<a href="#" id="button_sample3">a태그버튼</a>

위와같이 html 코드만 적용 한 후 실행결과를 보도록 하겠습니다.

정말 볼품없는 기본버튼이군요...

그럼 button() 함수를 적용하여 마법을 부려보도록 하겠습니다.

$(function(){
	$("#button_sample1").button();	
	$("#button_sample2").button();
	$("#button_sample3").button();
})

위 코드를 적용을 한 다음 실행을 하게 된다면?

부족했던 버튼들이 UI가 적용되어 큼지막하면서도 깔끔한 버튼으로 출력이 되었습니다.

그룹버튼UI 적용

이번에는 radio 태그에 그룹버튼 UI를 적용해보도록 하겠습니다.

버튼UI 적용때와 동일하게 HTML태그먼저 작성해보겠습니다.

<h3>라디오그룹버튼UI</h3>
<div id="groupbutton">
	<input type="radio" id="radio1" name="group" checked="checked" ><label for="radio1">그룹1</label>
	<input type="radio" id="radio2" name="group" ><label for="radio2">그룹2</label>
	<input type="radio" id="radio3" name="group" ><label for="radio3">그룹3</label>
</div>

라디오 버튼을 3개 작성 한다음 부모 DIV 태그로 감싸주었습니다.

이때 RADIO태그옆에 작성된 LABEL 태그에 내용작성과 

RADIO태그의 ID와 LABEL의 FOR 속성값이 일치해야 합니다.

역시 UI 적용전 실행 결과를 보겠습니다.

역시나 기본 라디오 화면이군요.. 

그럼 buttonset() 함수호출하고 적용을 해준다면?

$(function(){
	$("#groupbutton").buttonset();
})

위와같이 그룹버튼 형식으로 화면이 적용된 것을 확인 할수 있겠습니다.

SELECTBOX 일명 : 콤보박스 UI 적용

기본 selectbox 샘플 코드입니다.

<h3>셀렉트박스</h3>
<select id="selectmenu">
	<option value="0" selected="selected">첫번째옵션</option>
	<option value="1">두번째옵션</option>
	<option value="2">세번째옵션</option>
</select>

위의 기본 코드 결과를 확인해보시면

위와같이 나오는데 여기에 selectmenu() 함수를 적용해줍니다.

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

실행을 해보게되면 selectbox에 UI가 적용이 되겠죠? 

엥? 그러나 간격이 너무 좁은거 같아서 width 속성을 적용하여 넓이를 확장하도록 하겠습니다.

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

기존코드에서 {width : 200} 에 대한 속성을 함수내에 정의를 해준것 뿐입니다.

 원하는 넓이에 화면이 정상적으로 출력이 되었습니다 ^^

스피너/슬라이더 UI적용하기

스피너의 경우는 증가/감소에 대한 UI가 필요할때 적용하기 좋습니다.

그리고 슬라이더의 경우는 최소값/최대값 사이의 데이터를 구하고자(?) 할때 좋은 UI 인거 같습니다.

예를 들자면 원하는 물품의 가격대를 선택하고자 할때??에 대한 화면을 구성할때 좋은UI 같습니다.

스피너는 input 태그에 적용이 가능하며 슬라이더는 레이어 영역에 지정이 가능합니다.

다음코드르 보시겠습니다.

<h3>스피너UI</h3>
<input id="spinner" type="text" />
<h3>슬라이더UI</h3>
<div id="slider"></div>

스크립트 코드 부분은 다음과같습니다.

$(function(){
	//스피너 함수
	$("#spinner").spinner();
	//슬라이더 함수
	$("#slider").slider({
		range: true,
		//0 ~ 100 사이 option
		values: [ 0, 50 ]
	});
})

스피너 및 슬라이더함수를 적용한 실행결과입니다.

마지막으로 입력태그 클릭하였을경우 달력화면이 출력되어 

원하는 날짜 선택시 입력태그에 연월일이 자동입력되게하는 

datepicker UI를 적용해보도록 하겠습니다.

기본 HTML태그 및 호출 함수는 다음과 같습니다.

DATEPICKER HTML샘플코드

<h3>달력UI</h3>
<input type="text" id="picker" />

DATEPICKER JAVASCRIPT 샘플코드

$("#picker").datepicker();

실행을 해보도록 하겠습니다.

위와같이 정상적으로 datepicker 기능이 적용이 되었습니다.

이외에도 레이어구조를 잡아주는 UI와 자동완성기능 등 다양한 예제를 알아보도록 하겠습니다.

※ 오늘 포스팅한 UI들에 상세 옵션에 대한 부분도 이후에 포스팅하도록 하겠습니다.

by 개발로짜

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 코드

.
<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 버튼태그

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

버튼 태그에 대한 코드를 작성하셨다면

이제 jquery로 button() 함수를 아래와 같이 호출하면 

버튼 UI가 적용이 될것입니다.

onload 후 button() 함수 호출

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

실행을 해보도록 하겠습니다.

jQueryUI 연동테스트 실행결과

버튼ui가 다운로드받은 테마형태로 출력이 되었다면 

연동이 정상적으로 이루어 진 것입니다.

다음 포스팅에는 jQueryUI에서 제공하는 폼UI를 시작으로 

레이어 및 기능구현에 대해서 내용을 다루도록 하겠습니다.

by 개발로짜