본문 바로가기
프로그래밍/자바스크립트

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

by pentode 2018. 4. 12.

웹페이지에서 간단한 년도 선택상자(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
다운로드

 

반응형