메뉴 건너뛰기

MH

Home > Rhymix > Rhymix 팁
XE타운
2017.05.19 00:45

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

팔공산
조회 수 1,497 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

이전 다음 위로 아래로 인쇄 첨부 목록
?

단축키

Prev이전 문서

Next다음 문서

이전 다음 위로 아래로 인쇄 첨부 목록
첨부파일 등록일 파일크기 다운 수
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>
 
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>
이상이 원본 팁 입니다.
이 자료의 평점 (참여 : 0 / 총 점수 : ) 평균 평점 : ★ ★ ★ ★ ★ 0.0점 내 평점 : ★ ★ ★ ★ ★ 0점

[수정 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 팁 확장변수 형식을 "파일 업로드" 선택시 웹진형식에 이미지로 출력되게 하는 방법 [2026-08-15]
  2. RM 팁 확장변수 부분을 특정 폼형태(Table)로 구성하는 방법 [2024-12-07]
  3. RM 팁 게시판에서 글 작성시 확장변수에 Hidden 적용시 기본값이 적용되게 하는 법 [2024-10-17]
  4. RM 팁 SketchBook5 게시판스킨에 특정 확장변수(price)에 천 단위 쉼표(number_format) 적용하기 [2024-06-24]
  5. RM 팁 위젯에 확장변수 이용하여 시작날짜 ~ 종료날짜 출력하기 [2024-04-13]
TAG •
0 좋아요
Atachment
첨부
목록
Facebook Twitter Pinterest Band Kakao
위로 아래로 인쇄 첨부 목록
    댓글이 하나도 없네요ㅠㅠ
    Tip이 도움이 되었다면 댓글과 평가 부탁합니다. Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다.
✔ 이 글 평점 주기
★★★★★
5점
에디터 선택하기
?
에디터 사용하기 닫기

Xe Tips

Category
  1. 29Jan
    by 팔공산
    2018/01/29 in XE타운
    Views 598  Likes 0

    10원짜리 깜빡이로 강조하기 팁

  2. 27Jan
    by 팔공산
    2018/01/27 in 문하우스
    Views 2459  Likes 5 Replies 2

    SoSiFam 한 줄 메모 게시판 라이믹스에서 사용 가능하게 편집

  3. 27Jan
    by 팔공산
    2018/01/27 in 문하우스
    Views 1809  Likes 1 Replies 1

    라이믹스에서 내용글 없이 글 작성하기

  4. 27Jan
    by 팔공산
    2018/01/27 in 문하우스
    Views 1537  Likes 5 Replies 5

    문하우스의 라이믹스 업데이트 여정

  5. 22Jan
    by 팔공산
    2018/01/22 in XE타운
    Views 1176  Likes 5 Replies 5

    간단한 게시물 주소 복사 버튼 달기

  6. 21Jan
    by 팔공산
    2018/01/21 in 문하우스
    Views 1153  Likes 0

    게시판 설정 위자드 생성하는 방법

  7. 15Jan
    by 팔공산
    2018/01/15 in 문하우스
    Views 980  Likes 0 Replies 3

    squarenet.kr에서 제공하는 cPanel 무료 웹서브 세팅 따라하기

  8. 13Jan
    by 팔공산
    2018/01/13 in Xe
    Views 619  Likes 0

    로그인 ID를 이메일에서 아이디로 변경하는 방법

  9. 07Nov
    by 팔공산
    2017/11/07 in 문하우스
    Views 1457  Likes 6 Replies 7

    말풍선(툴팁) 애드온을 이용한 위젯설정 Sample

  10. 07Oct
    by 팔공산
    2017/10/07 in XE타운
    Views 760  Likes 0

    라이믹스 스케치북 게시판 및 스케치북 게시판 1.72 스크롤 이슈

  11. 25Sep
    by 팔공산
    2017/09/25 in 문하우스
    Views 823  Likes 0

    본문에 삽입된 이미지들이 사라진 경우

  12. 19May
    by 팔공산
    2017/05/19 in XE타운
    Views 1497  Likes 0

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

  13. 16May
    by 팔공산
    2017/05/16 in 기타
    Views 1281  Likes 5 Replies 6

    대댓글에 'OOO님에게 달린 댓글' 구현하기

  14. 22Apr
    by 팔공산
    2017/04/22 in XE타운
    Views 1520  Likes 5 Replies 13

    게시판 리스트 확장변수 항목에 css 입히기 Sample

  15. 20Mar
    by 팔공산
    2017/03/20 in XE타운
    Views 4476  Likes 0

    제목에 태그 출력하고 링크 걸기 Sample

  16. No Image 09Feb
    by 팔공산
    2017/02/09 in Xe
    Views 1613  Likes 0

    "이 페이지 나가기" 경고창이 뜨는 사이트의 경우

  17. 03Feb
    by 팔공산
    2017/02/03 in Xe
    Views 719  Likes 0

    xe업데이트 후 member모듈 업데이크가 되지 않을때

  18. 04Jan
    by 팔공산
    2017/01/04 in 문하우스
    Views 3098  Likes 0

    레이아웃 최상단에 애니메이션 효과로 펼쳐지는 메뉴 Sample

  19. 02Jan
    by 팔공산
    2017/01/02 in 문하우스
    Views 3488  Likes 0

    팝업창을 마우스로 이동 가능하게 하는 방법 Sample

  20. No Image 26Dec
    by 팔공산
    2016/12/26 in 기타
    Views 518  Likes 0

    [XE Core 1.4.4 이상] 새 템플릿 문법을 쉽게 알아보자.

목록
쓰기
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 ... 18 Next
/ 18
  1. 나의XE
  2. Xe자료
  3. Xe팁
  4. Html
  5. Layouts
  6. QnA
위로