jQuery 플러그인 4 - 년도 select 박스 만들기

웹페이지에서 간단한 년도 선택상자(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_plugin.zip

다운로드