셀렉트박스(접근성)

코드

- html

<select class="js-select">
							<option>option 01</option>
							<option>option 02</option>
							<option>option 03</option>
							<option>option 04</option>
						</select>

<select class="js-select">
							<option>option 01</option>
							<option>option 02</option>
							<option disabled>option 03</option>
							<option>option 04</option>
							<option disabled>option 05</option>
							<option>option 06</option>
							<option>option 07</option>
							<option disabled>option 08</option>
							<option disabled>option 09</option>
							<option disabled>option 10</option>
						</select>

<select class="js-select">
							<option>option 01</option>
							<option>option 02</option>
							<option>option 03</option>
							<option>option 04</option>
							<option>option 05</option>
							<option>option 06</option>
							<option>option 07</option>
							<option>option 08</option>
							<option>option 09</option>
							<option selected>option 10</option>
							<option>option 11</option>
							<option>option 12</option>
							<option>option 13</option>
							<option>option 14</option>
							<option>option 15</option>
							<option>option 16</option>
							<option>option 17</option>
							<option>option 18</option>
							<option>option 19</option>
							<option>option 20</option>
						</select>

<select class="js-select" disabled>
							<option>option 01</option>
							<option>option 02</option>
							<option>option 03</option>
							<option>option 04</option>
						</select>

- css

select {
							height:40px;
							padding:10px 10px 10px 13px;
							border:1px solid #dbdbdb;
							color:#000;
							font-size:14px;
						}

/* 셀렉트박스 */
						.jsSelectbox {
							display:inline-block;
							position:relative;
						}
						.jsSelectbox button {
							border:0;
							background-color:transparent;
						}

.jsSelectbox select {opacity:0;}
						.jsSelectbox .tabIdx {
							display:none;
							position:fixed;
							top:-99999px;
							left:-99999px;
							font-size:0;
							line-height:0;
							opacity:0;
						}
						/* active */
						.jsSelectbox.active {z-index:50;}
						.jsSelectbox.active .tabIdx {display:block;}

.jsSelect {
							position:absolute;
							top:0;
							left:0;
							width:100%;
						}
						.jsSelect .jsSelBtn {
							position:relative;
							z-index:5;
							width:100%;
							height:40px;
							padding:10px 30px 10px 10px;
							border:1px solid #dbdbdb;
							background-color:#fff;
							color:#000;
							font-size:14px;
						}
						.jsSelect .jsSelBtn:before {
							content:'';
							position:absolute;
							top:50%;
							right:10px;
							transform:translateY(-50%) rotate(45deg);
							width:6px;
							height:6px;
							box-sizing:border-box;
							border-width:0 2px 2px 0;
							border-style:solid;
							border-color:#333;
						}

/* disbled */
						.jsSelect .jsSelBtn:disabled {color:#ccc;}
						.jsSelect .jsSelBtn:disabled:before {opacity:0.4;}

.jsSelect .jsSelLayer {
							position:absolute;
							overflow-y:auto;
							top:40px;
							right:0;
							left:0;
							padding:6px 0;
							border:1px solid #dbdbdb;
							border-top:0;
							background-color:#fff;
							opacity:0;
						}

/* btm */
						.btm .jsSelect .jsSelLayer {
							top:auto;
							bottom:39px;
						}
						.jsSelect .jsSelOpt {
							display:block;
							position:relative;
							width:100%;
							height:30px;
							padding:0 11px;
							color:#333;
							font-size:14px;
							text-align:left;
							line-height:30px;
						}
						.jsSelect .jsSelOpt.active {background-color:#c0efff;}
						.jsSelect .jsSelOpt:disabled {color:#ccc;}

- script

$(window).on('load', function(){
							jsSelect();
						});

/*
							* 셀렉트박스

jsSelect();
							jsSelect('class');
							jsSelect('class', n);
							jsSelect('', n);
							jsSelect('class', n, function(){
								//콜백 영역
							});
							jsSelect('', '', function(){
								//콜백 영역
							});
						*/
						function jsSelect(el, len, callback){
							if(el){
								var $el = $('.' + el);
							}else{
								var $el = $('.js-select');
							}

if(len){
								var maxLen = len;
							}else{
								var maxLen = 10;
							}

$el.each(function(){
								//초기화
								$(this).unwrap('.jsSelectbox');
								$(this).attr('tabindex', '-1');

var selIdx = $(this).find('option:selected').index();
								var selVal = $(this).find('option:selected').text();

//셀렉트 생성
								$(this).wrap('<div class="jsSelectbox"></div>');
								$(this).after('<div class="jsSelect"><div class="tabIdx prev" tabindex="0"></div><button type="button" class="jsSelBtn">' + selVal + '</button><div class="jsSelLayer"></div><div class="tabIdx next" tabindex="0"></div></div>');
								if($(this).is(':disabled')){
									$(this).closest('.jsSelectbox').find('.jsSelBtn').prop('disabled', true);
								}

$('.jsSelectbox').siblings('.jsSelect').remove();//중복 셀렉트 삭제

//옵션 생성
								var $layer = $(this).closest('.jsSelectbox').find('.jsSelLayer');

$(this).find('option').each(function(){
									var txt = $(this).text();
									var idx = $(this).index();
									var disLen = $(this).prevAll('option:disabled').length;

if($(this).is(':disabled')){
										$layer.append('<button type="button" class="jsSelOpt" disabled>' + txt + '</button>');
									}else if($(this).is(':selected')){
										$layer.append('<button type="button" class="jsSelOpt active">' + txt + '</button>');
									}else{
										$layer.append('<button type="button" class="jsSelOpt" idx="' + (idx - disLen) + '">' + txt + '</button>');
									}
								});

//마지막 옵션값 체크
								var enaLen = $(this).closest('.jsSelectbox').find('option:enabled').length;
								$layer.find('.jsSelOpt[idx=' + (enaLen - 1) + ']').addClass('last');
								$layer.find('.jsSelOpt').removeAttr('idx');

//보여질 옵션 개수
								var pdT = parseInt($layer.css('padding-top'));
								var pdB = parseInt($layer.css('padding-bottom'));
								if(pdT == 0){
									var pdTop = 0;
								}else{
									var pdTop = pdT;
								}
								if(pdB == 0){
									var pdBtm = 0;
								}else{
									var pdBtm = pdB;
								}

var optHei = $layer.find('.jsSelOpt').outerHeight();
								var layerHei = optHei * maxLen + (pdT + pdB);

if($layer.find('.jsSelOpt').length > maxLen){
									$layer.css('max-height', layerHei);

jsSelLayer();//셀렉트박스 레이어 스크롤
								}

var layerData = $layer.outerHeight();

$layer.attr('data', layerData).css({
									'display':'none',
									'opacity':'1'
								})
							});

//접근성
							$(document).off('focus', '.jsSelectbox .tabIdx');
							$(document).on('focus', '.jsSelectbox .tabIdx', function(){
								if($(this).hasClass('prev')){
									$(this).closest('.jsSelectbox').find('.jsSelOpt.last').focus();
								}else{
									$(this).closest('.jsSelectbox').find('.jsSelBtn').focus();
								}
							});

//click
							$(document).off('click', '.jsSelBtn');
							$(document).on('click', '.jsSelBtn', function(){
								if($(this).closest('.jsSelectbox').hasClass('active')){
									jsSelClose();
								}else{
									jsSelClose();

$(this).closest('.jsSelectbox').css('z-index', '100').find('.jsSelLayer').slideDown(200, function(){
										$(this).closest('.jsSelectbox').addClass('active').removeAttr('style');
										jsSelLayer();//셀렉트박스 레이어 스크롤
									});
								}
							});

$(document).off('click', '.jsSelOpt');
							$(document).on('click', '.jsSelOpt', function(){
								var txt = $(this).text();

$(this).addClass('active').siblings('.jsSelOpt').removeClass('active');

$(this).closest('.jsSelectbox').find('.jsSelBtn').text(txt);
								$(this).closest('.jsSelectbox').find('select').val(txt);

jsSelClose(focus);
							});

$(document).mouseup(function(e){
								var $sel = $('.jsSelectbox');
								if(!$sel.is(e.target) && $sel.has(e.target).length === 0){
									jsSelClose();
								}
							});

/* 셀렉트박스 레이어 스크롤 */
							function jsSelLayer(){
								$('.jsSelLayer').each(function(){
									var idx = $(this).find('.jsSelOpt.active').index();
									var hei = $(this).find('.jsSelOpt').outerHeight();

if((idx + 1) >= maxLen){
										if(maxLen < 10){
											var sTop = hei * (idx - 1);
										}else{
											var sTop = hei * (idx - 7);
										}
									}else{
										var sTop = 0;
									}

$(this).scrollTop(sTop);
								});
							}

//콜백영역
							if(callback){
								callback(true);
							}
						}

/* 셀렉트박스 위치에 따른 레이어 */
						function jsSelScrl(){
							var docHei = $(window).height();
							var winTop = $(window).scrollTop();

$('.jsSelectbox').each(function(){
								var selTop = $(this).offset().top;
								var btnHei = $(this).find('.jsSelBtn').outerHeight() + Number($(this).find('.jsSelLayer').attr('data'));

if(docHei + winTop < selTop + btnHei){
									$(this).addClass('btm');
								}else{
									$(this).removeClass('btm');
								}
							});
						}

/* 셀렉트박스 닫기 */
						function jsSelClose(focus, callback){
							$('.jsSelectbox.active').each(function(){
								var $this = $(this);
								$('.jsSelectbox.active').find('.jsSelLayer').slideUp(100, function(){
									$('.jsSelectbox.active').removeClass('active');
									if(focus){
										$this.find('.jsSelBtn').focus();
									}
								});
							});

//콜백영역
							if(callback){
								callback(true);
							}
						}

셀렉트박스(접근성)

예제

사용방법

코드

- html

- css

- script