SketchBook5 게시판스킨에서 공지글을 클릭시 본문으로 이동하지 않고 폴딩형태로 아래로 내용이 나오게 하는 방법입니다.
예전에 문하우스 게시판스킨에서는 js파일로 복잡하게 구현했었는데
이제는 <details> 와 <summary>로 간단하게 구현할 수가 있다.
스케치북에서 공지사항 부분을 담당하는 파일이 _notice.html 이다. - 한 줄 공지 형식으로 선택시
<tr loop="$notice_list=>$no,$document" class="notice">
<td cond="$list_config['no']">{$lang->notice}</td>
<td class="title"><a href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}"><strong>{$document->getTitle($mi->subject_cut_size)}</strong></a></td>
<td cond="$list_config['nick_name']"><a href="#popup_menu_area" class="member_{$document->get('member_srl')}" onclick="return false">{$document->getNickName()}</a></td>
<td cond="$list_config['regdate']">{$document->getRegdate('Y.m.d')}</td>
<td cond="$list_config['last_update']">{getTimeGap($document->get('last_update'), "y.m.d")}</td>
</tr>
</table>
getTitle($mi->subject_cut_size)} 이 부분이 공지글 부분이다.
그럼 이 부분을 폴딩 처리하겠습니다.
skin.xml 파일에 선택 추가
<title xml:lang="ko">공지사항 슬라이드 출력</title>
<options value="">
<title xml:lang="ko">일반출력(기본)</title>
</options>
<options value="Y">
<title xml:lang="ko">슬라이드출력</title>
</options>
<description xml:lang="ko">공지사항 클릭시 슬라이드 형식 출력을 선택합니다.</description>
</var>
_notice.html 수정
<table class="bd_lst bd_tb_lst bd_tb common_notice">
<tr loop="$notice_list=>$no,$document" class="notice">
<td $list_config['no']">{$lang->notice}</td>
<td class="title">
<!--// 공지사항 일반 출력 -->
<a cond="$mi->notice_view_slide ==''" href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}"><strong>{$document->getTitle($mi->subject_cut_size)}</strong></a>
<!--// 공지사항 슬라이드 출력 -->
<details cond="!$mi->notice_view_slide ==''" class="accordion">
<summary class="notice_fold">
<strong>{$document->getTitle($mi->subject_cut_size)}</strong>
</summary>
<p style="margin-top:10px">
<span>{$document->getContent(false)}</span>
<div style="text-align:right; float:left; padding-bottom:5px; width:100%">
<div style="float:right">
<a href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}" class="btn"><span>공지글 보기</span></a>
<!--@if($grant->write_comment && $oDocument->isEnableComment() )-->
<a href="{getUrl('act','dispBoardWriteComment','document_srl',$document->document_srl)}" class="btn"><span>{$lang->cmd_comment_registration}</span></a>
<!--@end-->
<!--@if($document->isEditable())-->
<!--@if(!( !$grant->manager && $document->getCommentCount()))-->
<a href="{getUrl('act','dispBoardWrite','document_srl',$document->document_srl,'comment_srl','')}" class="btn"><span>{$lang->cmd_modify}</span></a>
<!--@end-->
<!--@if(!( !$grant->manager && $oDocument->getCommentCount()))-->
<a href="{getUrl('act','dispBoardDelete','document_srl',$document->document_srl,'comment_srl','')}" class="btn"><span>{$lang->cmd_delete}</span></a>
<!--@end-->
<!--@end-->
</div>
</div>
<style>
summary.notice_fold::-webkit-details-marker { display: none; }
summary.notice_fold { display: block; }
summary.notice_fold { position: relative; padding-left: 1.2em; cursor: pointer; }
summary.notice_fold::before { content: ""; position: absolute; border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent; border-left: 0.75em solid yellowgreen; top: 0.2em; left: 0; transition: .25s transform; }
details[open] summary:before { transform: rotateZ(90deg); }
</style>
</details>
</td>
<td cond="$list_config['nick_name']"><a href="#popup_menu_area" class="member_{$document->get('member_srl')}" onclick="return false">{$document->getNickName()}</a></td>
<td cond="$list_config['regdate']">{$document->getRegdate('Y.m.d')}</td>
<td cond="$list_config['last_update']">{getTimeGap($document->get('last_update'), "y.m.d")}</td>
</tr>
</table>
<script cond="!$mi->notice_view_slide ==''" >
<!--// 한개의 공지내용만 Open -->
const detailsList = document.querySelectorAll('.accordion');
for (const details of detailsList) {
details.addEventListener('click', () => {
if (details.open) {
// 현재 열려 있는 details가 아닌 다른 details를 찾아 닫습니다.
for (const otherDetails of detailsList) {
if (otherDetails !== details && otherDetails.open) {
otherDetails.open = false;
}
}
// 화면 최상단으로 스크롤
// window.scrollTo({ top: 0, behavior: 'smooth' });
// 현재 열려 있는 details의 상단 위치를 계산합니다.
const detailsTop = details.getBoundingClientRect().top;
// 스크롤 위치를 details 상단에서 30px 위로 이동합니다.
window.scrollTo({
top: detailsTop - 30,
behavior: 'smooth',
});
}
});
}
<!--// 내용글 Open시 슬라이딩 효과 -->
const $_details = $(".accordion");
const $_summary = $_details.find(".notice_fold");
$_summary.on("click", function(e) {
e.preventDefault();
const $_this = $(this);
const $_this_details = $_this.parent("details");
const $_this_details_p = $_this_details.find("p");
const $_this_details_open = $_this_details.attr("open");
if (! $_this_details_open) {
$_this_details.prop("open", true);
$_this_details_p.stop().slideDown(1000);
} else {
$_this_details_p.stop().slideUp(500, function() {
$_this_details.prop("open", false);
});
}
});
</script>
css와 script는 예제로 만들어 본 것입니다. 참조하시면 됩니다.