이번 포스팅은 각종 입력태그에 jQueryUI를 적용하여 UI를 적용해보도록 해보도록 하겠습니다.
다루어볼 UI종류 : 버튼/그룹버튼/콤보박스/스피너/슬라이더/달력(datepicker)
각종 상세 옵션에 대해서는 이후에 차근차근 다루어 보도록 하겠습니다.
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가 적용되어 큼지막하면서도 깔끔한 버튼으로 출력이 되었습니다.
이번에는 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 샘플 코드입니다.
<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 같습니다.
스피너는 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태그 및 호출 함수는 다음과 같습니다.
<h3>달력UI</h3> <input type="text" id="picker" />
$("#picker").datepicker();
실행을 해보도록 하겠습니다.
위와같이 정상적으로 datepicker 기능이 적용이 되었습니다.
이외에도 레이어구조를 잡아주는 UI와 자동완성기능 등 다양한 예제를 알아보도록 하겠습니다.
※ 오늘 포스팅한 UI들에 상세 옵션에 대한 부분도 이후에 포스팅하도록 하겠습니다.
by 개발로짜
jQueryUI 5장 - sortable을 이용하여 목록순서 변경하기 (0) | 2014.11.07 |
---|---|
jQueryUI 4장 - autocomplete 함수를이용하여 Ajax 비동기 자동완성 구현해보기 (9) | 2014.11.06 |
jQueryUI 3장 - 다양한 레이아웃을 만들어보자(어코디언,탭,레이어팝업) (0) | 2014.11.05 |
jQueryUI 1장 - 테마선택하여 다운로드 후 간단하게 버튼태그에 UI 적용하기 (0) | 2014.11.04 |