웹페이지에서 간단한 년도 선택상자(select 박스, 콤보 박스, 드롭다운 리스트)를 jQuery 플러그인으로 만들어 보겠습니다.
달력까지 제공되는 자바스크립트로된 UI 들이 많이 있지만, jQuery 플러그인 연습도 해볼겸 간단하게 사용할 수 있는 년도 선택상자를 만들어 봅니다. 보통 자바스크립트로 UI 를 만들때 <div> 요소를 사용해서 만들어질 곳을 표시하고, 스크립트에서 동적으로 태그를 교체하여 생성을 합니다.
이번 예제에서는 간단히 하기 위해서 <select> 요소를 직접 사용하여 내용을 동적으로 채울 수 있도록 합니다. 즉, 모양을 바뀌지 않는다는 것입니다. <select> 요소의 옵션을 년도로 간편하게 채울 수 있는 초 간단 플러그인이 되겠습니다.
* 기본적인 기능은 2010년을 시작 년도로하고, 마지막 년도는 현재년도 + 1 년까지로 옵션을 채우고, 현재 년도를 기본 값으로 선택된 상태로 만들어지는 것입니다.
* 생성시에 시작년도(startYear), 마지막 년도(endYear), 선택되어질 년도(currentYear)값을 줘서 기본값을 바꿀 수 있는 기능을 제공합니다.
* 선택상자의 옵션을 원하는 값으로 임의로 설정할 수 있는 기능을 제공합니다.
년도 선택상자 코드 입니다. jquery.yearSelector.js 파일 입니다.
// 년도 선택박스 생성
(function($) {
$.fn.yearSelector = function(options) {
if(this.length === 0) {
return this;
}
// 기본값과 옵션을 결합하여 설정값을 만듭니다.
var date = new Date();
var settings = $.extend({
startYear : 2010,
endYear : date.getFullYear() + 1,
currentYear : date.getFullYear()}, options);
// 설정값으로 콤보박스의 옵션을 생성합니다.
this.each(function() {
var selectBox = $(this);
selectBox.empty();
if(settings.endYear >= settings.startYear) {
for(var i = settings.endYear; i >= settings.startYear; i--) {
selectBox.append($('<option>', {text:i, value:i}));
}
// 현재 년도를 기본 값으로 합니다.
selectBox.val(settings.currentYear);
}
});
// 선택박스의 전체 데이터를 교체 합니다. - public 함수
this.setData = function(datas) {
if(datas == null) return;
this.each(function() {
var selectBox = $(this);
selectBox.empty();
$.each(datas, function(i, opt) {
selectBox.append($('<option>', opt));
});
});
return this;
};
return this;
};
}(jQuery));
js 파일을 포함합니다. jQuery 플러그 인이므로 jqery 코드가 먼저 필요합니다.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery.yearSelector.js"></script>
선택박스 html 요소입니다. id를 사용하여 하나씩 적용할 수 있습니다. jQuery 셀렉트 기능을 사용하므로 class 속성을 사용하게 되면 여러개의 년도 선택상자에 한번에 값을 넣을 수도 있습니다. 하지만 그렇게 사용될 경우는 잘 없을것 같습니다.
<select id="basic"></select>
<select id="dynamic"></select>
실제 생성하는 자바스크립트 코드 입니다. html 요소로 DOM 이 생성된 후에 호출 해야 하므로 $(document).read(fu ction(){}); 를 사용해서 생성하고 있습니다.
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
// 기본 생성 및 현재값 지정하기
$("#basic").yearSelector().val(2016);
// 임의의 값으로 내용 바꾸기
var selectors = $("#dynamic").yearSelector();
selectors.setData(
[
{text:"2018", value:"2018"},
{text:"2017", value:"2017"},
{text:"2016", value:"2016"},
{text:"2015", value:"2015"}
]).val(2017);
});
//]]>
</script>
실행결과 입니다.
※ 예제 소스
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
자바스크립트 쿠키 - jQuery Cookie Plugin (0) | 2018.04.17 |
---|---|
자바스크립트의 trim() 함수 사용하기 (0) | 2018.04.17 |
이미지 슬라이더 - bxSlider 사용법 (26) | 2018.04.12 |
자바스크립트 함수(Function)와 함수의 call(), apply(), bind() 함수 (4) | 2018.04.10 |
jQuery 플러그인 3 - 확장 기능 제공 (0) | 2018.04.10 |