[ HOOK ] 여분필드 플로팅 옵션 > 그누보드5 플러그인

그누보드5 플러그인

그누보드는 다양한 기능을 추가하기 쉽습니다.

[ HOOK ] 여분필드 플로팅 옵션 정보

[ HOOK ] 여분필드 플로팅 옵션

첨부파일

user.config.zip (1.2K) 11회 다운로드 2022-05-05 19:24:35
테스트한 버전5.5.7
호환 가능 버전5.4 이상

본문

1. wr_1 부터 wr_10 까지 따로 스킨을 만질 필요없이

쉽게 여분필드를 플로팅옵션으로 세팅해주는 플러그인입니다.

basic 과 gallery 스킨에서 pc 와 모바일 모두에 자동으로 적용됩니다.

input type 은 text 만 가능합니다.

 

----------

 

2. extend 디렉토리의 user.config.php 의 적당위치에 아래의 코드를 입력합니다.

기존에 user.config.php 에 다른 코드가 있으면 그 코드를 지우지 마시고

이 코드만 첨가해 주세요.

 


<?php 
add_event('tail_sub', 'wr_float_field');
function wr_float_field() {
    global $write, $board;
    if (strpos($_SERVER['SCRIPT_NAME'], "/bbs/write.php") !== false && $board['bo_1'] !== "0") {
?>
        <style>
        #wrFloatFieldDiv { position:fixed; bottom:15px; left:15px; z-index:100; background-color:#ffffff; padding:3px; border:1px solid #cccccc; border-radius:3px; box-sizing:border-box; display:none; }
        #wrFloatFieldSpan { position:fixed; bottom:15px; left:15px; z-index:100; font-size:1.5rem; color:#ffa500; cursor:pointer; }
        .wr-float-field-button { width:100%; height:30px; display:block; padding:10px; border:1px solid #cccccc; border-radius:3px; text-align:center; background-color:#f7d7e4; font-weight:bold; outline:none; cursor:pointer; }
        .wr-float-field-input { width:100%; height:30px; display:block; padding:10px; border:1px solid #cccccc; border-radius:3px; text-align:center; margin-top:1px; }
        .wr-float-field-input::placeholder { color:#cccccc; }
        </style>
        <span id=wrFloatFieldSpan><i class="fa fa-paw" aria-hidden="true"></i></span>
        <script>
        <?php
        for ($wr = 1; $wr <= 10; $wr++) echo "wrFloatValue_".$wr."='".$write['wr_'.$wr]."';";
        echo "wrFloatFieldRequired='".$board['bo_1']."';";
        ?>
        btn_submit.insertAdjacentHTML("afterend", "<div id=wrFloatFieldDiv style=width:150px></div>");
        wrFloatFieldDiv.innerHTML = "<input id=wrFloatFieldCloseButton type=text class=wr-float-field-button value=CLOSE readonly>";
        for (wr = 1; wr <= 10; wr++) wrFloatFieldDiv.innerHTML += "<input id=wr_" + wr + " name=wr_" + wr + " class=wr-float-field-input placeholder=" + wr + "번 필드 value='" + window['wrFloatValue_' + wr] + "'>";
        wrFloatFieldDiv.innerHTML += "<input id=wrFloatFieldSizeButton class=wr-float-field-button style=margin-top:1px value=SIZE readonly>";
        for (wr = 1; wr <= 10; wr++) {
            if (wrFloatFieldRequired.indexOf(wr) > -1) {
                window["wr_" + wr].required = 1;
                with (window['wr_' + wr].style) {
                    backgroundImage = "url(../img/require.png)";
                    backgroundRepeat = "no-repeat";
                    backgroundPosition = "right top";
                }
            }
        }        
        wrFloatFieldSpan.onclick = function() {
            wrFloatFieldSpan.style.display = "none";
            wrFloatFieldDiv.style.display = "block";
        }
        wrFloatFieldCloseButton.onclick = function() {
            wrFloatFieldDiv.style.width = "150px";
            wrFloatFieldDiv.style.display = "none";
            wrFloatFieldSpan.style.display = "block";
        }
        wrFloatFieldSizeButton.onclick = function() {
            wrFloatFieldDiv.style.width = wrFloatFieldDiv.style.width == "150px" ? wr_subject.offsetWidth + "px" : "150px";
        }
        </script>
<?php
    }
}
?>

 

----------

 

3. user.config.php 파일의 형식은 UTF-8(BOM 없음) 으로 세팅해 주세요.

 

----------

 

4. 글쓰기나 글수정 모드에서 좌하단을 보면 아래처럼 오렌지색 폰트어썸 아이콘이 보입니다.

이걸 클릭하면 아이콘이 사라지면서 그 자리에 여분필드를 입력하는 영역이 나타납니다.

 

31832361_1651744183.9325.jpg

 

----------

 

5. 여분필드 옵션을 작성하고 작성완료를 클릭하세요.

 

31832361_1651744244.9871.jpg

 

----------

 

6. CLOSE 버튼을 누르면 옵션창이 사라지면서 원래의 모습으로 돌아가고

SIZE 버튼을 누르면 가로길이가 커졌다 작아졌다 하는 토글이벤트가 적용됩니다.

 

31832361_1651744330.6462.jpg

 

----------

 

7. 필수요소의 경우 게시판 관리모드의 1번 여분필드에서 선택해 줍니다.

예를 들어서 2,4,6,10 을 입력하면 그 숫자대로의 여분필드가 필수로 선택되면서

우상단에 빨간점이 생겨납니다. 

 

31832361_1651744428.7081.jpg

 

----------

 

8. 만일 플로팅옵션을 사용하지 않으려면 관리모드 여분필드에서 0을 줍니다.

 

31832361_1651744731.2244.jpg

 

----------

 

9. 다 아시다시피 1번 여분필드의 경우

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

 

----------

 

10. 5.4버전 이상 pc와 모바일 모두 크롬에서만 확인하였고 테마나 빌더는 배려하지 않았습니다.

추천
5

댓글 전체

개인적으로 여분필드는 10개면 충분하다고 생각합니다만
타입 글자수를 늘이고 explode 로 사용하면 대만족이죠.

코드에는 for 문이 3번 사용되고 있습니다.
php 에서 1번, 자바스크립트에서 2번
for 문의 마지막 값인 10을 변수로 만듭니다.

아래는 wr_1 부터 wr_n 까지라고 할 때 마지막 n 을 추출하는 방법입니다.
$wr_count 이라는 변수를 10대신 넣어주세요.
php 에서는 $wr_count 를 그대로 써야 하지만
자바스크립트에서는 <?php echo $wr_count; ?> 로 사용해야 하겠죠.

<?php
$wr_count = 0;
while (isset($write['wr_'.($wr_count + 1)])) ++$wr_count;
echo $wr_count;
?>

그러나 이럴 경우 여분필드를 50개 쓴다든지 하면 가로 하나씩 세로길이가 왕창 길어지는 정렬이 됩니다.
이럴 때 가로 2개나 3개 등으로 배치하는 것과 그에 따라 바뀌는 사이즈를 키웠다 줄였다 하는 자바스크립트 코드 등은 제가 만들어 드리지 않으니 본인이 직접 소스를 만드세요.^^

지금 생각해보니 for 문으로 빼도 되겠네요.

<?php
for ($wr_count = 0; isset($write['wr_'.($wr_count + 1)]); $wr_count++);
echo $wr_count;
?>
전체 414
그누보드5 플러그인 내용 검색

회원로그인

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