다중 여분필드 쉽게 만드는 함수 - 1. 라디오버튼

그누를 처음 만지는 분들에게 가장 쉽지 않은 부분이 여분필드를 만드는 것입니다.

물론 훌륭한 가이드가 있지요.

작은별님 - https://gnustudy.com/bbs/board.php?bo_table=skin_board&wr_id=10

그런데요. 다중 여분필드 즉, 라디오버튼과 셀렉트박스 그리고 멀티체크박스

이 3가지는 아무리 봐도 녹록한 대상이 아닙니다.

그...래...서...

이 3가지를 아주 쉽게 만드는 함수를 3차례에 걸쳐서 공유하겠습니다.

오늘은 첫번째로 라디오버튼입니다.

write.skin.php 의 상단이나 아니면 write.head.skin.php 을 만들어서 아래의 함수를 입력합니다.

[code]

<style>
.wr-radio { margin-left:3px; margin-right:7px; }
</style><?php
function wr_radio($radio_wr, $radio_str, $radio_req) {
    global $write;
    return "
        <script>
        n = ".explode('_', $radio_wr)[1].";
        document.write('<span id=wrRadio_' + n + ' onmouseover=n=' + n + '>');
        this['radio_' + n] = ('".$radio_str."').split(',');
        this['radioValue' + n] = '".$write[$radio_wr]."';
        document.write('<input type=hidden id=wr_' + n + ' name=wr_' + n + ' value=\'' + this['radioValue' + n] + '\'>');
        for (this['name_' + n] of this['radio_' + n]) document.write('<input type=radio name=_' + n + ' value=\'' + this['name_' + n] + '\'><span class=wr-radio>' + this['name_' + n] + '</span>');
        document.getElementsByName('_' + n)[document.getElementsByName('_' + n).length - 1].style.marginRight = '0px';
        this['radioReq_' + n] = ".$radio_req.";
        for (this['_' + n] of document.getElementsByName('_' + n)) {
            this['_' + n].checked = this['wr_' + n].value == this['_' + n].value;
            this['_' + n].onclick = function() {
                window['wr_' + n].value = this.value;
            }
        }
        if (this['radioReq_' + n] && this['wr_' + n].value == '') {
            document.getElementsByName('_' + n)[0].checked = 1;
            document.getElementsByName('_' + n)[0].onclick();
        }
        document.write('</span>');
        </script>
    ";
}
?>

[/code]

이것으로 "땡"입니다. 이제 원하는 부분에 이 함수를 표현시켜 주기만 하면 됩니다.

[code]

<?php echo wr_radio("wr_1", "사과,귤,배,복숭아", 1); ?>

[/code]

<?php echo wr_radio("wr_2", "사과,귤,배,복숭아", 1); ?>

1. "wr_2" 는 여분필드의 이름입니다. 원하는 걸 사용하세요.

2. "사과,귤,배,복숭아" 는 라디오버튼의 항목입니다. 쌍따옴표로 두르고

각 항목 사이를 쉼표 처리 합니다. 항목은 몇개라도 상관없습니다. 그리고 마지막 쉼표는 찍지 않습니다.

3. 마지막 항목 1은 필수선택이고 0을 주면 필수선택이 아닙니다.

필수항목 1을 선택하면 가장 첫번째 항목이 체크됩니다.

이건 처음 글쓰기에만 적용이 되고 다음부터는 저장된 여분필드를 불러오겠지요.

4. 여분필드의 번호와 항목만 바꾸면 몇개를 사용해도 상관 없습니다.

5. 코드 첫번째 css 를 보면 .wr-radio { margin-left:3px; margin-right:7px; } 가 있는데요.

이건 left 의 경우는 라디오버튼과 문자 사이의 간격이고 right 의 경우는 각 항목 사이의 간격입니다.

마지막 항목의 right 는 0픽셀로 자동처리 하였습니다.

----------

다 아시다시피 뷰페이지에서는 <?php echo $view['wr_2']; ?> 로 표현되고

리스트 페이지에서는 <?php echo $list[$i]['wr_2']; ?> 로 표현됩니다.

빌어먹을 IE 에서는 안 통하는 자바스크립트 코드를 썼으니

이 테크닉을 사용하시려면 IE는 아예 쳐다보지도 않으셨으면 좋겠습니다.

다음에는 셀렉트박스 함수를 공유하겠습니다.

----------

한 가지 더 팁을 드리자면 7번째 줄 return 이라고 표기된 부분을 echo 로 바꾸면

echo 없이 <?php wr_radio("wr_1", "사과,귤,배,복숭아", 1); ?> 이렇게 사용이 가능합니다.