XE타운

확장변수중 "단일 선택(radio)"시 "직접입력" 부분 나오게 수정

by 팔공산 posted May 19, 2017
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

이전 다음 위로 아래로 인쇄 목록
첨부파일 등록일 파일크기 다운 수
Extra Form
원작자 윤삼
출처 https://www.xetown.com/lakepark/529171
[원본 Tip]
후원회원 가입 받을 때 후원금액 선택 받는 법

이번에는 후원금액을 선택 받는 팁을 공개해봅니다.
(물론 이번에도 국민 게시판ㅋ 스케치북 게시판을 이용합니다.)
 
아마 여러분은 둘 중 하나를 선택하실지 모르겠습니다.
- 라디오 버튼을 이용해서 후원자에게 객관식으로 선택지를 주거나 (예. 1만원, 2만원, 3만원, 5만원),
- 텍스트 입력폼을 이용해 후원자에게 주관식으로 직접 입력하게 하는 방식이겠죠.
 
이번에 소개해드리는 팁은 쉽게 말해, 객관식과 주관식을 섞는 방식입니다.
예컨대, 저는 게시판 쓰기 화면에서 다음과 같이 나오게 했습니다.
01.png
 
여기서 마지막 버튼('직접 입력')을 누르면 다음과 같이 됩니다.
02.png
이렇게 후원자가 후원금액을 직접적으로 입력할 수도 있게 한 거죠.
 
뿐만 아니라 input 이벤트를 이용해서 최소 금액('첫 번째 버튼에 표시된 금액')보다 후원금액이 적게 입력되는 경우에는 다음과 같이 메시지가 바뀌어서 출력됩니다.
03.png
 
그리고 이 상태에서 입력창을 벗어나려 하면 (천 단위로 콤마를 찍어줌과 동시에) 입력된 금액 부분을 전체 선택(하이라이트) 시키고 커서를 돌아오게 합니다. 아울러 메시지도 바뀌게 되죠.
04.png

또한, 엔터를 누르거나 등록 버튼을 클릭해서 입력 내용을 전송하려 하는 경우에는, 화면상에는 특정 숫자가 입력되어 있어도 실제로는 입력값이 초기화되어 입력 불가 경고창이 뜨게 됩니다.
05.png
 
하지만 최소금액 이상의 후원금액이 입력되면 메시지도 본래대로 (사용자정의 설명문 형태로) 돌아오고, 입력 값도 무사히 서버에 전송이 가능해집니다.
06.png
 
객관식 버튼을 눌렀을 때 후원금액이 별탈없이 전송되는 건 물론입니다.^^
07.png
 
... 그러면 이제 그 방법과 (다소 후줄근한ㅋ) 소스를 알려드리겠습니다.
 
1. 사용자 정의를 만들어줍니다.

- 저는 '사용자 정의 이름'을 'donation'으로 했습니다.
- '입력항목 이름'은 위 그림에서처럼 '후원금액'으로 했구요.
- '형식'은 '단일 선택(radio)', 기본값은 '5000, 10000, 20000, 30000, 50000, etc'로 했습니다.
- '설명'은 다음과 같이 했습니다. '후원회원으로 CMS를 통한 매월 약정액의 후원금 자동이체에 동의합니다.'
- 기본값의 구분은 쉼표로 하는 게 기본인데, 제 경우엔 쉼표와 띄어쓰기를 병행했습니다. 혹시 모르니 여러분도 가급적이면 띄어쓰기에 유의해주세요.
 
2. write_form.html 파일 수정

- <tr loop="$extra_keys=>$key,$val">에 속해 있는 <td> 태그를 찾고 아래처럼 바꿔주면 됩니다.
<td cond="$val->eid!='donation'">{$val->getFormHTML()}</td>
<td cond="$val->eid=='donation'">
<style>
.exForm li{display:inline-block;line-height:26px;cursor:pointer}
#donation_etc{display:none;margin-top:10px;vertical-align:middle;}
#donation_etc input{width:83px;height:26px;font-size:12px;}
</style>
<ul>
{@
$val_array = explode(', ',$val->default);
$val_value = implode('',$oDocument->getExtraEidValue($val->eid));
}
<li loop="$n=0;$n<count($val_array);$n++">
<!--@if($n+1!=count($val_array))-->
<input name="extra_vars{$val->idx}" class="radio" id="extra_vars{$val->idx}-100{$n+1}" type="radio" value="{$val_array[$n]}">
<label for="extra_vars{$val->idx}-100{$n+1}">월 {number_format($val_array[$n])}원</label>
<!--@else-->
<input name="extra_vars{$val->idx}" class="radio" id="extra_vars{$val->idx}-100{$n+1}" type="radio" value="">
<label for="extra_vars{$val->idx}-100{$n+1}">직접 입력</label>
<span id="donation_etc">
월 <input type="tel" id="etc_val" class="itx" value="<!--@if(!in_array($val_value,$val_array))-->{number_format($val_value)}<!--@end-->" />원
</span>
<!--@end-->
</li>
</ul>
<p>{$val->desc}</p>
<script>
jQuery(document).ready(function(){
var etc = jQuery('#donation_etc'),
li_last = etc.parent('li'),
para = li_last.parent('ul').next('p'),
pText = li_last.parent('ul').next('p').text(),
li_rest = li_last.parent('ul').children('li').not(li_last),
first_val = Number(li_last.parent('ul').children('li:first').children('input.radio').val()),
etc_btn = li_last.children('input'),
etc_val = jQuery('#etc_val'),
donated = '{$val_value}',
msg1 = '최소 5천원 이상의 후원을 받고 있습니다.',
msg2 = ' 후원금액 재입력을 부탁드립니다.';

if(donated==0) etc_val.val('');
if(donated!=''&&donated!=0){
etc_btn.val(donated.replace(/[^0-9]/g,''));
etc_btn.prop('checked',true);
etc.show();
li_rest.children('input').each(function(){
if(jQuery(this).val()==donated){
jQuery(this).prop('checked',true);
etc_val.val('');
etc.hide();
}
});
}

etc_val.on({
input: function(){
etc_val.val(etc_val.val().replace(/[^0-9,]/g,'').replace(/(^0+)/,''));
etc_btn.val(etc_val.val().replace(/[^0-9]/g,''));
if(etc_btn.val()!=0&&etc_btn.val()<first_val) {
etc_btn.val('');
para.text(msg1);
} else {
etc_btn.val(etc_val.val().replace(/[^0-9]/g,''));
para.text(pText);
}
},
blur: function(){
if(li_rest.data('mouseDown')!=true){
etc_btn.val(etc_val.val().replace(/[^0-9]/g,''));
etc_val.val(etc_val.val().replace(/[^0-9]/g,'').replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'));
if(etc_btn.val()!=0&&etc_btn.val()<first_val) {
etc_val.select();
etc_btn.val('');
para.text(msg1+msg2).hide().fadeIn(1000);
etc_val.focus();
}
}
}
});

li_last.on('click',function(){
etc_btn.prop('checked',true);
etc.show();
etc_val.focus();
etc_val.val(etc_val.val().replace(/[^0-9]/g,'').replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'));
if(etc_val.val().replace(/[^0-9]/g,'')!=0&&etc_val.val().replace(/[^0-9]/g,'')<first_val) {
etc_val.select();
etc_btn.val('');
para.text(msg1+msg2).hide().fadeIn(1000);
}
return false;
});
etc_btn.on('focus',function(){
etc_btn.prop('checked',true);
etc_val.focus();
});

li_rest.on('mousedown',function(e){
li_rest.data('mouseDown',true);
});
li_rest.on('mouseup',function(e){
li_rest.data('mouseDown',false);
});
li_rest.on('click',function(){
jQuery(this).children('input').prop('checked',true);
etc.hide();
para.text(pText);
});
});
</script>
</td>
이 자료의 평점 (참여 : 0 / 총 점수 : ) 평균 평점 : ★ ★ ★ ★ ★ 0.0점
 
3. _read.html 파일 수정

- 쓰기 화면에서 입력된 값은 기본적으로 숫자로만 저장되어 전송됩니다.
- 만약 출력 화면에서는 천단위로 콤마를 찍어주고 싶다면, _read.html을 수정하시면 됩니다.
- 월 정기 후원인 경우에는 숫자 앞뒤로 '월'과 '원'을 붙여줘야겠죠?
- 먼저, 다음 부분을 찾습니다.
<td cond="$val->eid!='rating'">{$val->getValueHTML()}</td>
< td cond="$val->eid=='rating'" class="rating"><span class="starRating" title="{$val->getValueHTML()}{$lang->score}"><span style="width:{$val->getValueHTML()*10}%">{$val->getValueHTML()}</span></span></td>
- 이 부분은 모두 두 부분이 있습니다.  '스킨 설정 > 본문 일반 설정 > 확장변수 위치'가 '본문 안에(기본)'인 경우엔 아래쪽 table, '제목 아래'인 경우엔 윗쪽 table이 될 겁니다.
- 이 두 부분을 모두 다음과 같이 바꿔줍니다.
<td cond="$val->eid!='rating'&&$val->eid!='donation'">{$val->getValueHTML()}</td>
<td cond="$val->eid!='rating'&&$val->eid=='donation'">월 {number_format(str_replace(',','',$val->getValueHTML()))}원</td>
<td cond="$val->eid=='rating'&&$val->eid!='donation'" class="rating"><span class="starRating" title="{$val->getValueHTML()}{$lang->score}"><span style="width:{$val->getValueHTML()*10}%">{$val->getValueHTML()}</span></span></td>
이상이 원본 팁 입니다.

[수정 Tip]
저는 확장변수의 "mid"와 "사용자 정의 이름"을 설정에서 수정할 수 있게 하고,
아울러 단위와 최저치 메세지도 설정에서 수정할 수 있게끔 수정하는 방법입니다.

1. skin.xml에 추가
<group>
<title xml:lang="ko">확장변수 설정</title>
<var name="etc_mid" type="text">
<title xml:lang="ko">★수정확장변수 mid</title>
<description xml:lang="ko">수정할 확장변수의 mid(게시판명)를 적어주세요.
</description>
</var>
<var name="etc_name" type="text">
<title xml:lang="ko">　┖ 수정할 확장변수 사용자 정의 이름</title>
<description xml:lang="ko">수정을 원하는 확장변수의 사용자 정의 이름을 적어주세요.</description>
</var>
<var name="f_name" type="text">
<title xml:lang="ko">　┖ 확장변수 전방 단위</title>
<description xml:lang="ko">확장변수값 앞에 붙는 단위를 적어주세요.(예 ; 월)</description>
</var>
<var name="b_name" type="text">
<title xml:lang="ko">　┖ 확장변수 후방 단위</title>
<description xml:lang="ko">확장변수값 뒤에 붙는 단위를 적어주세요.(예 ; 원)</description>
</var>
<var name="msg_1" type="text">
<title xml:lang="ko">　┖ 최저치 이하 메세지 1</title>
<description xml:lang="ko">입력값이 최저치 이하인 경우 메세지 1</description>
</var>
<var name="msg_2" type="text">
<title xml:lang="ko">　┖ 최저치 이하 메세지 2</title>
<description xml:lang="ko">입력값이 최저치 이하인 경우 메세지 2</description>
</var>
</group>


2. write_form.html 과 _write_form_mobile.html 수정(모바일까지 수정)

<td cond="$val->eid!==$mi->etc_name">{$val->getFormHTML()}</td>
<td cond="$mid ==$mi->etc_mid&&$val->eid==$mi->etc_name">
	<style>
		.exForm li{display:inline-block;line-height:26px;cursor:pointer}
		#donation_etc{display:none;margin-top:10px;vertical-align:middle;}
		#donation_etc input{width:83px;height:26px;font-size:12px;}
	</style>
	<ul>
	{@
		$val_array = explode(', ',$val->default);
		$val_value = implode('',$oDocument->getExtraEidValue($val->eid));
	}
		<li loop="$n=0;$n<count($val_array);$n++">
		<!--@if($n+1!=count($val_array))-->
			<input name="extra_vars{$val->idx}" class="radio" id="extra_vars{$val->idx}-100{$n+1}" type="radio" value="{$val_array[$n]}">
			<label for="extra_vars{$val->idx}-100{$n+1}">{$mi->f_name} {number_format($val_array[$n])}{$mi->b_name}</label>
		<!--@else-->
			<input name="extra_vars{$val->idx}" class="radio" id="extra_vars{$val->idx}-100{$n+1}" type="radio" value="">
			<label for="extra_vars{$val->idx}-100{$n+1}">직접 입력</label>
			<span id="donation_etc">
				{$mi->f_name} <input type="tel" id="etc_val" class="itx" value="<!--@if(!in_array($val_value,$val_array))-->{number_format($val_value)}<!--@end-->" />{$mi->b_name}
			</span>
		<!--@end-->
		</li>
	</ul>
	<p>{$val->desc}</p>
</td>

중간 소스 그대로 두고 코드 제일 아래에 스크립트 추가하세요.

<script>


jQuery(document).ready(function(){
	var etc = jQuery('#donation_etc'),
		li_last = etc.parent('li'),
		para = li_last.parent('ul').next('p'),
		pText = li_last.parent('ul').next('p').text(),
		li_rest = li_last.parent('ul').children('li').not(li_last),
		first_val = Number(li_last.parent('ul').children('li:first').children('input.radio').val()),
		etc_btn = li_last.children('input'),
		etc_val = jQuery('#etc_val'),
		donated = '{$val_value}',
		msg1 = '{$mi->msg_1}',
		msg2 = ' {$mi->msg_2}';


	if(donated==0) etc_val.val('');
	if(donated!=''&&donated!=0){
		etc_btn.val(donated.replace(/[^0-9]/g,''));
		etc_btn.prop('checked',true);
		etc.show();
		li_rest.children('input').each(function(){
			if(jQuery(this).val()==donated){
				jQuery(this).prop('checked',true);
				etc_val.val('');
				etc.hide();
			}
		});
	}


	etc_val.on({
		input: function(){
			etc_val.val(etc_val.val().replace(/[^0-9,]/g,'').replace(/(^0+)/,''));
			etc_btn.val(etc_val.val().replace(/[^0-9]/g,''));
			if(etc_btn.val()!=0&&etc_btn.val()<first_val) {
				etc_btn.val('');
				para.text(msg1);
			} else {
				etc_btn.val(etc_val.val().replace(/[^0-9]/g,''));
				para.text(pText);
			}
		},
		blur: function(){
			if(li_rest.data('mouseDown')!=true){
				etc_btn.val(etc_val.val().replace(/[^0-9]/g,''));
				etc_val.val(etc_val.val().replace(/[^0-9]/g,'').replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'));
				if(etc_btn.val()!=0&&etc_btn.val()<first_val) {
					etc_val.select();
					etc_btn.val('');
					para.text(msg1+msg2).hide().fadeIn(1000);
					etc_val.focus();
				}
			}
		}
	});


	li_last.on('click',function(){
		etc_btn.prop('checked',true);
		etc.show();
		etc_val.focus();
		etc_val.val(etc_val.val().replace(/[^0-9]/g,'').replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'));
		if(etc_val.val().replace(/[^0-9]/g,'')!=0&&etc_val.val().replace(/[^0-9]/g,'')<first_val) {
			etc_val.select();
			etc_btn.val('');
			para.text(msg1+msg2).hide().fadeIn(1000);
		}
		return false;
	});
	etc_btn.on('focus',function(){
		etc_btn.prop('checked',true);
		etc_val.focus();
	});


	li_rest.on('mousedown',function(e){
		li_rest.data('mouseDown',true);
	});
	li_rest.on('mouseup',function(e){
		li_rest.data('mouseDown',false);
	});
	li_rest.on('click',function(){
		jQuery(this).children('input').prop('checked',true);
		etc.hide();
		para.text(pText);
	});
});
</script>

이렇게 하지 않고 원본팁대로 붙여서 추가를 하면

로그인을 해도 글 작성란 아래 로그아웃때 처럼 이름,비번,메일등 의 란이 나옵니다.


3. _read.html 수정


<td cond="$val->eid!='rating'&&$val->eid!==$mi->etc_name">{$val->getValueHTML()}</td>

<td cond="$val->eid!='rating'&&($mid ==$mi->etc_mid&&$val->eid==$mi->etc_name)">{$mi->f_name} {number_format(str_replace(',','',$val->getValueHTML()))}{$mi->b_name}</td>

<td cond="$val->eid=='rating'&&$val->eid!==$mi->etc_name" class="rating"><span class="starRating" title="{$val->getValueHTML()}{$lang->score}"><span style="width:{$val->getValueHTML()*10}%">{$val->getValueHTML()}</span></span></td>


이렇게 수정해서 사용하시면 다른 게시판에 큰 영향 주지않고

다양한 용도로 사용도 가능합니다.

#연관글
  1. RM 팁 확장변수 부분을 특정 폼형태(Table)로 구성하는 방법 [2024-12-07]
  2. RM 팁 게시판에서 글 작성시 확장변수에 Hidden 적용시 기본값이 적용되게 하는 법 [2024-10-17]
  3. RM 팁 SketchBook5 게시판스킨에 특정 확장변수(price)에 천 단위 쉼표(number_format) 적용하기 [2024-06-24]
  4. RM 팁 위젯에 확장변수 이용하여 시작날짜 ~ 종료날짜 출력하기 [2024-04-13]
  5. 달집의 팁 Github에 Public으로 올린 파일 홈페이지 에서 바로 다운로드 받기 [2024-04-07]
이 Tip의 평점 (참여 : 0 / 총 점수 : ) 평균 평점 : ★ ★ ★ ★ ★ 0.0점
TAG •
Prev 본문에 삽입된 이미지들이 사라진 경우 본문에 삽입된 이미지들이 사라진 경우 2017.09.25by 팔공산 대댓글에 'OOO님에게 달린 댓글' 구현하기 Next 대댓글에 'OOO님에게 달린 댓글' 구현하기 2017.05.16by 팔공산
위로 아래로 인쇄 목록
    댓글이 하나도 없네요ㅠㅠ
    Tip이 도움이 되었다면 댓글과 평가 부탁합니다. Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다.
✔ 이 글 평점 주기
★★★★★
5점
에디터 선택하기
?
스티커
에디터 사용하기 닫기
스티커

Articles

2 3 4 5 6 7 8 9 10 11