[ HOOK ] 여분필드 플로팅 옵션 정보
[ HOOK ] 여분필드 플로팅 옵션
첨부파일
본문
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. 글쓰기나 글수정 모드에서 좌하단을 보면 아래처럼 오렌지색 폰트어썸 아이콘이 보입니다.
이걸 클릭하면 아이콘이 사라지면서 그 자리에 여분필드를 입력하는 영역이 나타납니다.
----------
5. 여분필드 옵션을 작성하고 작성완료를 클릭하세요.
----------
6. CLOSE 버튼을 누르면 옵션창이 사라지면서 원래의 모습으로 돌아가고
SIZE 버튼을 누르면 가로길이가 커졌다 작아졌다 하는 토글이벤트가 적용됩니다.
----------
7. 필수요소의 경우 게시판 관리모드의 1번 여분필드에서 선택해 줍니다.
예를 들어서 2,4,6,10 을 입력하면 그 숫자대로의 여분필드가 필수로 선택되면서
우상단에 빨간점이 생겨납니다.
----------
8. 만일 플로팅옵션을 사용하지 않으려면 관리모드 여분필드에서 0을 줍니다.
----------
9. 다 아시다시피 1번 여분필드의 경우
뷰페이지에서는 <?php echo $view['wr_1']; ?> 로 표현되고
리스트 페이지에서는 <?php echo $list[$i]['wr_1']; ?> 로 표현됩니다.
----------
10. 5.4버전 이상 pc와 모바일 모두 크롬에서만 확인하였고 테마나 빌더는 배려하지 않았습니다.
6
댓글 전체
타입 글자수를 늘이고 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;
?>
제가 늦게 보았네요.
감사합니다.
