![관련메뉴](/images/comm/bbs_list_side.gif)
글 수 93
2
조회 수 : 293 신고 : 0
출처 : | https://xetown.com/rxe_tip/1056318 |
---|
xetown에 올라온 팁을 적용하기 쉽게 조금 수정했습니다.
앞에 아이콘은 fontawesome를 사용하셔야 하기 때문에 팁에는 일부 제거했습니다.
사용하시는 게시판 스킨 view 파일을 열고 <!--#include("./comment.html")--> 부분을 찾아서 그 아래 해당 코드를 삽입합니다.
<!-- 댓글 새로고침 --> <div id="reply_refresh"> {@ $args->status = 1; $args->document_srl = $oDocument->get('document_srl'); $args->module_srl = $oDocument->get('module_srl'); $args->list_count = 1; $output = executeQueryArray('comment.getNewestCommentList',$args); } <span class="last_srl" style="display:none;"> {@ $lastData = end($output->data); $last_srl = $lastData->comment_srl; } {$last_srl} </span> <div class="no_newcomment" style="display:none;">새로운 댓글이 없습니다.</div> <div class="yes_newcomment" style="display:none;">새로운 댓글이 <a href="javascript:location.reload();" class="num">1개</a> 이상 추가되었습니다.</div> <button class="comment-reload" onclick="commentReload({$oDocument->document_srl})"><span>댓글 새로고침</span> <div class="loading-spinner"></div> </button> </div>
게시판 CSS 파일을 여시고, 아래 코드를 넣어주세요.
/* 댓글 새로고침 */ #reply_refresh{position:relative;height:25px;padding:15px 10px 40px 10px;border-top:1px solid #eee;text-align:center;overflow:hidden} #reply_refresh .no_newcomment, #reply_refresh .yes_newcomment{position:absolute;bottom:5px;left:50%;height:10px;padding:10px 10px 15px;color:#666;text-align:center;overflow:hidden} #reply_refresh .no_newcomment{margin-left:-76px} #reply_refresh .yes_newcomment{margin-left:-120px} #reply_refresh .yes_newcomment .num{color:#FF3636} #reply_refresh button.comment-reload {position:relative; width:100px;height:25px;margin:0 auto;background-color:#1E7AE2;border:1px solid #42589a;border-radius:3px;color:#fff; text-align:center; border:none;line-height:25px;overflow:hidden} #reply_refresh .loading-spinner { z-index:2; position:absolute; display:none; border:2px solid #fff; border-right-color:transparent; border-radius:50%; box-sizing:border-box; -webkit-animation-duration:0.45s; -moz-animation-duration:0.45s; animation-duration:0.45s; -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-name:rotate-forever; -moz-animation-name:rotate-forever; animation-name:rotate-forever; -webkit-animation-timing-function:linear; -moz-animation-timing-function:linear; animation-timing-function:linear; height:16px; width:16px; top:4px; left:50%;margin-left:-8px;background-color:#1E7AE2;overflow:hidden } @-webkit-keyframes rotate-forever { 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg)} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg)} } @-moz-keyframes rotate-forever { 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg); transform: rotate(0deg)} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg)} } @keyframes rotate-forever { 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg); transform: rotate(0deg)} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg)} }
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
아이콘이 붙게됩니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
![BEST](/modules/board/skins/xe_webmini/img/common/icon_bestreply.gif)
추천수에 따른 배경색 보기
본문으로 바로가기
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상