다중 여분필드 쉽게 만드는 함수 - 1. 라디오버튼 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

본문

 

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

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

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

 

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

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

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

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

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

 

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

 


<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>
    ";
}
?>

 

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


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

31832606_1648563676.104.jpg

 

<?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); ?> 이렇게 사용이 가능합니다.

추천
20

댓글 32개

매우 유용한 기능을 쉽게 구현할 수 있어서 참 좋습니다. 공개해주셔서 고맙습니다. 셀렉트박스, 멀티체크박스도 많이 기다리고 있습니다.
저는 초보를 갓 벗어났다고 스스로 생각합니다. 저와 같은 초보들은 이 유용한 코드를 게시판에 적용하기가 쉽지 않은데요. 저는 다음과 같이 해보았습니다.

write.skin.php
카테고리 출력부분 아래에 코드를 붙여넣었습니다.
    <?php if ($is_category) { ?>
    <div class="bo_w_select write_div">
        <label for="ca_name" class="sound_only">분류<strong>필수</strong></label>
        <select name="ca_name" id="ca_name" required>
            <option value="">분류를 선택하세요</option>
            <?php echo $category_option ?>
        </select>
    </div>
    <?php } ?>       
       
<!--        비타주리님의 라디오버튼만들기 시작-->
<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>');
        this['wrRadio_' + n].getElementsByClassName('wr-radio')[this['wrRadio_' + n].getElementsByClassName('wr-radio').length - 1].style.marginRight = '0px';
        this['radioReq' + n] = ".$radio_req.";
        for (this['_' + n] of document.getElementsByName('_' + n)) {
            this['_' + n].checked = this['radioReq' + n] && this['wr_' + n].value == '' ? 1 : this['wr_' + n].value == this['_' + n].value;
            this['_' + n].onclick = function() {
                window['wr_' + n].value = this.value;
            }
        }
        document.write('</span>');
        </script>
    ";
}
?>       
<!--        비타주리님의 라디오버튼만들기 끝-->
     
<!-- 비타주리님의 라디오버튼함수 호출 시작        -->
<?php echo wr_radio("wr_1", "사과,귤,배,복숭아", 1); ?>
<!-- 비타주리님의 라디오버튼함수 호출 끝        --> 

그리고 view.skin.php파일에서 페이지 정보를 나타내는 부분에 코드를 붙여넣었습니다. inline css약간 추가하고요.
    <section id="bo_v_info">
        <h2>페이지 정보</h2>
        <div class="profile_info">

        <div class="pf_img"><?php echo get_member_profile_img($view['mb_id']) ?></div>

        <div class="profile_info_ct">

        <span class="sound_only">작성자</span> <strong><?php echo $view['name'] ?><?php if ($is_ip_view) { echo "&nbsp;($ip)"; } ?></strong>
<br>
      <span class="sound_only">댓글</span><strong><a href="#bo_vc"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <?php echo number_format($view['wr_comment']) ?>건</a></strong>
        <span class="sound_only">조회</span><strong><i class="fa fa-eye" aria-hidden="true"></i> <?php echo number_format($view['wr_hit']) ?>회</strong>
        <strong class="if_date"><span class="sound_only">작성일</span><i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo date("y-m-d H:i", strtotime($view['wr_datetime'])) ?></strong>
               
                <!-- 비타주리의 라디오버튼함수 호출 시작        -->
                <span class="" style="color:blue;font-size:16px;font-weight:bold;padding-left:20px;">kim's fruit is: <?php echo $view['wr_1']; ?> </span>
                <!-- 비타주리의 라디오버튼함수 호출 끝        -->
               
    </div>
    </div>

그리고 list.skin.php에서는 글쓴이 다음에 출력이 되도록 아래처럼 수정했습니다.
            <th scope="col">번호</th>
            <th scope="col">제목</th>
            <th scope="col">글쓴이</th>
           
            <!-- 비타주리의 라디오버튼함수 호출 시작        -->
            <th scope="col">kim's fruit</th>
            <!-- 비타주리의 라디오버튼함수 호출 끝      -->
           
            <th scope="col"><?php echo subject_sort_link('wr_hit', $qstr2, 1) ?>조회 </a></th>
            <?php if ($is_good) { ?><th scope="col"><?php echo subject_sort_link('wr_good', $qstr2, 1) ?>추천 </a></th><?php } ?>
            <?php if ($is_nogood) { ?><th scope="col"><?php echo subject_sort_link('wr_nogood', $qstr2, 1) ?>비추천 </a></th><?php } ?>
            <th scope="col"><?php echo subject_sort_link('wr_datetime', $qstr2, 1) ?>날짜  </a></th>

~ 중략 ~

            <td class="td_name sv_use"><?php echo $list[$i]['name'] ?></td>
           
           
            <!-- 비타주리의 라디오버튼함수 호출 시작        -->
            <td class="td_name sv_use"><?php echo $list[$i]['wr_1'] ?></td>
            <!-- 비타주리의 라디오버튼함수 호출 시작        -->
           
           
            <td class="td_num"><?php echo $list[$i]['wr_hit'] ?></td>
            <?php if ($is_good) { ?><td class="td_num"><?php echo $list[$i]['wr_good'] ?></td><?php } ?>
            <?php if ($is_nogood) { ?><td class="td_num"><?php echo $list[$i]['wr_nogood'] ?></td><?php } ?>
            <td class="td_datetime"><?php echo $list[$i]['datetime2'] ?></td>

감사합니다. 필수 선택시 체크 부분이 마지막 항목이 아니라 첫 항목이 선택되도록 코드를 수정하였습니다.
새로 받아 가세요.^^

감사합니다.
필수 선택시 체크 부분이 마지막 항목이 아니라 첫 항목이 선택되도록 코드를 수정하였습니다.
새로 받아 가세요.^^

감사합니다.
필수 선택시 체크 부분이 마지막 항목이 아니라 첫 항목이 선택되도록 코드를 수정하였습니다.
새로 받아 가세요.^^
감사합니다. 개인적으로는 필수항목 1을 선택하면 가장 마지막 항목이 체크됩니다.
이 부분에서 맨 앞이 선택되어야 하지 않나 생각은 됩니다.

감사합니다.
필수 선택시 체크 부분이 마지막 항목이 아니라 첫 항목이 선택되도록 코드를 수정하였습니다. 제가 생각해도 그게 관례인 것 같네요.
새로 받아 가세요.^^

감사합니다.
필수 선택시 체크 부분이 마지막 항목이 아니라 첫 항목이 선택되도록 코드를 수정하였습니다.
새로 받아 가세요.^^

감사합니다.
필수 선택시 체크 부분이 마지막 항목이 아니라 첫 항목이 선택되도록 코드를 수정하였습니다.
새로 받아 가세요.^^
여분 필드를 이제서야 이해하고 이 팁을 보게 되네요.
여분필드가 신기한거군요. ^^
여분으로 사용하라고 준건데... 누가 얼마나 사용할 수 있는지는 자신의 몫인것이였네요.
이제까지 못챙겨먹은 난 뭐였지? ㅋㅋㅋ 이제 잘 챙겨 먹도록 하겠습니다.
챙겨먹는 법 알려주셔서 감사합니다. 다음 것 읽으러 갑니다. ~~
전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT