다중 여분필드 쉽게 만드는 함수 - 2. 셀렉트박스 > 그누보드5 팁자료실

그누보드5 팁자료실

다중 여분필드 쉽게 만드는 함수 - 2. 셀렉트박스 정보

다중 여분필드 쉽게 만드는 함수 - 2. 셀렉트박스

본문

 

사용법은 1편 라디오버튼과 동일합니다.

https://sir.kr/g5_tip/18179

 

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

 


<style>
.wr-select { width:100%; height:40px; text-align-last:center; text-align:center; border:1px solid #cccccc; border-radius:3px; }
</style>
<?php
function wr_select($select_wr, $select_str, $select_req) {
    global $write;
    return "
        <script>
        n = ".explode('_', $select_wr)[1].";
        document.write('<select id=wr_' + n + ' name=wr_' + n + ' class=wr-select onmouseover=n=' + n + '>');
        this['select_' + n] = ('".$select_str."').split(',');
        for (this['option_' + n] of this['select_' + n]) document.write('<option>' + this['option_' + n] + '</option>');
        document.write('<option style=display:none value=\'\'>선택하세요</option>');
        document.write('</select>');
        this['selectReq_' + n] = ".$select_req.";
        this['selectString' + n] = '".$write[$select_wr]."';
        if (this['selectReq_' + n]) {
            if (this['selectString' + n] == '') this['wr_' + n].value = this['wr_' + n].getElementsByTagName('option')[0].value;
            else this['wr_' + n].value = this['selectString' + n];
            with (this['wr_' + n].style) {
                backgroundImage = 'url(../img/require.png)';
                backgroundRepeat = 'no-repeat';
                backgroundPosition = 'right top';
            }
        }
        else this['wr_' + n].value = this['selectString' + n];
        </script>
    ";
}
?>

 

함수는 write.skin.php 에서 아래처럼 표현합니다.


<?php echo wr_select("wr_3", "홍샹명,콩석명,홍석명,도우", 1); ?>

 

다음 중 리자님의 본명은?

31832606_1648630097.6889.jpg

 

1. 필수선택을 사용하여 1로 주면 최초 글쓰기시 첫번째 항목이 표시되면서 우상단에 빨간점이 붙습니다.

필수선택을 사용하지 않고 0으로 주고 최초 글쓰기시 선택하세요가 나옵니다.

이게 무슨 말인지 모르겠으면 1편의 설명글을 읽어 보세요.

물론 수정모드에서는 여분필드값이 표시됩니다.

 

2. 빨간점의 경우는 그누에 원래 내장된 이미지인데 다른 이미지 또는 포지션을 바꾸고 싶으면

코드내에서 with 블럭으로 감은 셀렉트의 스타일을 본인의 취향대로 바꾸어 줍니다.

            with (this['wr_' + n].style) {
                backgroundImage = 'url(../img/require.png)';
                backgroundRepeat = 'no-repeat';
                backgroundPosition = 'right top';
            }

 

3. css 설명입니다.

1) 가로 100% 세로 40px 은 그누의 기본 옵션과 같습니다.

만일 셀렉트의 가로 사이즈를 변경시키고자 한다면 css 를 변경하지 마시고

<div style=width:200px><?php echo wr_select("wr_2", "홍샹명,콩석명,홍석명,도우", 1); ?></div>

위와 같이 상위에 엘레먼트를 하나 감아서 상위 엘레먼트의 가로사이즈로 조절하시는 것이 좋습니다.

사이즈를 100%로 주는 것은 모바일과 반응형까지를 감안한 것이라 손을 대면 피곤해집니다.

 

2) text-align-last:center; 는 <select> 의 문자정렬이고

text-align:center; 는 <option> 의 문자정렬입니다. 둘 모두 left, center, right 를 사용합니다.

 

4. 뷰페이지에서는 <?php echo $view['wr_3']; ?> 으로 표현되고

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

 

----------

 

다음에는 멀티 체크박스 함수를 공유하겠습니다.

생각 외로 따져보아야 할 경우의 수가 많아서

라디오버튼이나 셀렉트박스에 비해 코드구성이 좀 번거롭네요.

추천
11

댓글 9개

전체 2,132 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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