FAKE FORM v0.5

실행

기본 적용 함수.

$('select, input, textarea')[[.fakeform()]];

위 함수는 아래 함수들을 한 번에 모두 실행하는 함수.
별도로 아래와 같이 필요한 기능만 각각 실행할 수도 있고,
지원함수들도 fakeform 함수 하나를 통해서 실행할 수 있음.

$('select')[[.fakeselect()]];
$('input[type="radio"], input[type="checkbox"]')[[.fakecheck()]];

.fakecheck()

지원함수

$()[[.fakecheck('enable')]]; // disabled 상태 제거
$()[[.fakecheck('disable')]]; // disabled 상태로 변경
$()[[.fakecheck('remove')]]; // fakecheck 스크립트 제거
$()[[.fakecheck()]]; // 외부에서 값을 변경하는 등의 처리를 했을 경우 상태 리셋.

기본(첫번째 요소 변경 시 현재 상태 alert)

<input type="radio" id="radio1-1" name="radio1" checked="checked">
<label for="radio1-1">라디오 버튼 1-1</label>
<input type="checkbox" id="check1" name="check1" checked="checked">
<label for="check1">체크박스 1</label>

$('input[name="radio1"]').click(function() {
	alert('라디오 버튼 1-1'+' '+($('input[name="radio1"]').get(0).checked ? '선택' : '선택해제'));
});
$('input#check1').click(function() {
	alert('체크박스 1'+' '+(this.checked ? '체크' : '체크해제'));
});

디자인 변경(해당 input 엘리먼트에 CSS 클래스를 지정하면 대체 요소에도 추가됨)

체크박스 디자인 변경 체크박스 디자인 변경(disabled)

<input type="checkbox" id="check-design1" name="check-design1" [[class="colored"]] checked="checked">
<label for="check-design1">체크박스 디자인 변경</label>

<input type="checkbox" id="check-design2" name="check-design2" [[class="colored"]] checked="checked" disabled="disabled">
<label for="check-design2">체크박스 디자인 변경(disabled)</label>

fakecheck 적용/제거(적용 시 $().fakecheck() 제거 시 $().fakecheck('remove') 함수 실행)

라디오 버튼 1 라디오 버튼 2 라디오 버튼 3 체크박스 레이블 체크박스 레이블

<input type="radio" id="radio-toggle-1" name="radio-toggle">
<label for="radio-toggle-1">라디오 버튼 1</label>
<input type="radio" id="radio-toggle-2" name="radio-toggle">
<label for="radio-toggle-2">라디오 버튼 2</label>
<input type="radio" id="radio-toggle-3" name="radio-toggle">
<label for="radio-toggle-3">라디오 버튼 3</label>

<input type="checkbox" id="check-toggle" name="check-toggle">
<label for="check-toggle">체크박스 레이블</label>

<button onclick="togglefakecheck.add();">fakecheck 적용</button>
<button onclick="togglefakecheck.remove();">fakecheck 제거</button>

var togglefakecheck = (function() {
	var $toggletarget = $('#radio-toggle-1, #radio-toggle-2, #radio-toggle-3, #check-toggle');
	return {
		add: function() {
			$toggletarget[[.fakecheck()]];
		},
		remove: function() {
			$toggletarget[[.fakecheck('remove')]];
		}
	}
})();

disabled 속성 변경(속성을 제거할 때 $().fakecheck('enable'), 지정할 때 $().fakecheck('disable') 함수 사용. 또는 직접 지정 후 $().fakecheck() 함수 실행)

라디오 버튼 레이블 라디오 버튼 레이블 체크박스 레이블 체크박스 레이블

<input type="radio" id="radio-toggledisable-1" name="radio-toggledisable">
<label for="radio-toggledisable-1">라디오 버튼 레이블</label>
<input type="radio" id="radio-toggledisable-2" name="radio-toggledisable">
<label for="radio-toggledisable-2">라디오 버튼 레이블</label>
<input type="checkbox" id="check-toggledisable" name="check-toggledisable">
<label for="check-toggledisable">체크박스 레이블</label>

$('#radio-toggledisable-1, #radio-toggledisable-2, #check-toggledisable')
	.fakecheck( ( $('#check-toggledisable').attr('disabled') )? 'enable' : 'disable');

외부 제어(값을 지정한 후 $().fakecheck() 함수 실행)

라디오 버튼 1 라디오 버튼 2 라디오 버튼 3

체크박스 1 체크박스 2 체크박스 3

<input type="radio" id="radio-out-control-1" name="radio-out-control" checked="checked">
<label for="radio-out-control-1">라디오 버튼 1</label>
<input type="radio" id="radio-out-control-2" name="radio-out-control">
<label for="radio-out-control-2">라디오 버튼 2</label>
<input type="radio" id="radio-out-control-3" name="radio-out-control">
<label for="radio-out-control-3">라디오 버튼 3</label>

<button type="button" onclick="outcontrol_radios();">선택 변경</button>

var outcontrol_radios = (function() {
	var $radios = $('#radio-out-control-1, #radio-out-control-2, #radio-out-control-3'),
		on = 0;
	return function() {
		on++;
		if (on == $radios.length) {
			on = 0;
		}
		$radios[on].checked = true;
		$radios[[.fakecheck()]];
	}
})();

<input type="checkbox" id="check-out-control-1" name="check-out-control-1">
<label for="check-out-control-1">체크박스 1</label>
<input type="checkbox" id="check-out-control-2" name="check-out-control-2">
<label for="check-out-control-2">체크박스 2</label>
<input type="checkbox" id="check-out-control-3" name="check-out-control-3">
<label for="check-out-control-3">체크박스 3</label>

<button type="button" onclick="outcontrol_checks();">전체 선택/해제</button>

var outcontrol_checks = (function() {
	var $checks = $('#check-out-control-1, #check-out-control-2, #check-out-control-3')
		checked = false;
	return function() {
		checked = !checked;
		if (checked) {
			$checks.prop('checked', true)[[.fakecheck()]];
		} else {
			$checks.removeAttr('checked')[[.fakecheck()]];
		}
	}
})();
</script>

.fakeselect()

지원속성

[[data-fakeselect-hide="true"]] // 옵션 중 옵션 레이어에서는 표시하지 않을 경우
[[data-option-width="(넓이값(숫자))"]] // 옵션 레이어 넓이를 별도로 지정하는 경우

지원함수

$()[[.fakeselect('enable')]]; // disabled 상태 제거
$()[[.fakeselect('disable')]]; // disabled 상태로 변경
$()[[.fakeselect('remove')]]; // fakeselect 스크립트 제거
$()[[.fakeselect()]]; // 외부에서 값을 변경하는 등의 처리를 했을 경우 상태 리셋.

기본

<select style="width:100px;">
	<option>기본</option>
	...
</select>

<select>
	<option>스크롤</option>
	<option>옵션 1</option>
	...
</select>

<select>
	<option>옵션 그룹</option>
	<optgroup label="옵션 그룹 1">
		<option>옵션 1-1</option>
		<option>옵션 1-2</option>
		<option>옵션 1-3</option>
	</optgroup>
	...
	<option disabled="disabled">옵션 4</option>
	<option>옵션 5</option>
</select>

옵션 숨김(option 태그에 'data-fakeselect-hide="true"' 속성 추가)

<select>
	<option [[data-fakeselect-hide="true"]]>옵션레이어에서는 감춤</option>
	<option>옵션 1</option>
	...
</select>

옵션레이어 별도 넓이 설정(select 태그에 'data-option-width="(넓이값(숫자))"' 속성 추가)

<select [[data-option-width="280"]] style="width:170px">
	<option>1. 옵션의 내용이 길어서 안절부절 조마조마 노심초사</option>
	...
</select>

fakeselect 적용/제거(적용 시 $().fakeselect() 제거 시 $().fakeselect('remove') 함수 실행)

<select id="ex-togglefakeselect">
	<option>옵션 1</option>
	...
</select>
<button onclick="togglefakeselect.add();">fakeselect 적용</button>
<button onclick="togglefakeselect.remove();">fakeselect 제거</button>

var togglefakeselect = (function() {
	var $toggletarget = $('#ex-togglefakeselect');
	return {
		add: function() {
			$toggletarget[[.fakeselect()]];
		},
		remove: function() {
			$toggletarget[[.fakeselect('remove')]];
		}
	}
})();

셀렉트박스 추가(추가 후 $().fakeselect() 함수 실행)

<select>
	<option>옵션 1</option>
	...
</select>
<button onclick="addselect();">셀렉트박스 추가</button>

var addselect = (function() {
	var $inserttarget = $('#ex-addselect'),
		addselectno = 0;
	return function() {
		var $newselect = $('<select />'),
			options = $newselect[0].options,
			i = 0;
		$newselect[0].options.length = ++addselectno;
		for ( ; i < addselectno; i++ ) {
			options[i].text = '추가셀렉트 '+ addselectno +' 옵션 '+ (i+1);
		}
		$inserttarget.before(' ').before($newselect);
		$newselect[[.fakeselect()]];
	}
})();

디스플레이 속성 변경(보일 때 $().fakeselect('show'), 감출 때 $().fakeselect('hide') 함수 사용. 또는 직접 지정 후 $().fakeselect() 함수 실행.)

<select id="ex-display" style="display:none;">
	<option>옵션 1</option>
	...
</select>
<button onclick="$('#ex-display').fakeselect( ( !$('#ex-display')[0].offsetWidth )? 'show' : 'hide');">보이기/감추기</button>

<p id="ex-display-parent" style="margin-top:10px;display:none;">
	<select style="width:120px;">
		<option>옵션 1</option>
		...
	</select>
	<style>.widthincss { width: 110px; }</style>
	<select class="widthincss">
		<option>옵션 1</option>
		...
	</select>
	<!-- 해당 select 요소의 넓이를 확인할 수 없는 경우. $().fakescroll() 함수 옵션의 defaultwidth로 적용 -->
	<select>
		<option>옵션 1</option>
		...
	</select>
</p>
<button onclick="$('#ex-display-parent')[ ( !$('#ex-display-parent')[0].offsetWidth )? 'show' : 'hide' ]();">parentNode 보이기/감추기</button>
<button onclick="$('#ex-display-parent select')[[.fakeselect()]];">fakeselect();</button>

disabled 속성 변경(속성을 제거할 때 $().fakeselect('enable'), 지정할 때 $().fakeselect('disable') 함수 사용. 또는 직접 지정 후 $().fakeselect())

<select id="ex-disabled" disabled="disabled">
	<option>옵션 1</option>
	...
</select>

<button onclick="$('#ex-disabled').fakeselect( ( $('#ex-disabled').attr('disabled') )? 'enable' : 'disable');">disabled속성 변경</button>

readonly 속성 변경 속성 지정 후 $().fakeselect())

<select id="ex-readonly" readonly="readonly">
	<option>옵션 1</option>
	...
</select>

<button onclick="$('#ex-readonly').attr('readonly') ? $('#ex-readonly').removeAttr('readonly') : $('#ex-readonly').attr('readonly', 'readonly');$('#ex-readonly').fakeselect();">disabled속성 변경</button>

셀렉트박스 옵션 변경(옵션값 변경 후 $().fakeselect() 함수 실행)

<select id="ex-addoption">
	<option>옵션 1</option>
	...
</select>

<button onclick="optioncontrol.add('first');">처음에 추가</button>
<button onclick="optioncontrol.add('last');">마지막에 추가</button>
<button onclick="optioncontrol.remove('first');">처음옵션 삭제</button>
<button onclick="optioncontrol.remove('last');">마지막옵션 삭제</button>

var optioncontrol = (function() {
	var $select = $('#ex-addoption'),
		options = $select[0].options,
		addoptionno = 0;
	return {
		add: function(flag) {
			var newoption = document.createElement('option');
			newoption.text = newoption.value = '추가옵션 '+ ++addoptionno;
			options.add(newoption, ( flag == 'first' )? 0 : options.length);
			$select[[.fakeselect()]];
		},
		remove: function(flag) {
			if ( options.length ) {
				if ( flag == 'first' ) {
					$select[0].removeChild(options[0]);
				} else {
					options.length = options.length-1;
				}
				$select[[.fakeselect()]];
			}
		}
	}
})();