KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

댓글 페이징 달기. > 그누보드5 팁자료실

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
부가서비스
KCP 이벤트!

그누보드5 팁자료실

댓글 페이징 달기. 정보

댓글 페이징 달기.

첨부파일

첨부파일 view_comment.skin.php (13.8K) 81회 다운로드 2018-12-28 15:02:27
첨부파일 댓글페이징.PNG (20.1K) 15회 다운로드 2018-12-28 15:43:26

본문

그누보드의 경우

댓글이 무한정으로 달릴경우

레이아웃이 하단으로 무한정 길어집니다.

 

레이아웃이나, 길어지는게 보기 좋지 않은분들을 위한 댓글 페이징 기능입니다.

 

코드하단에 아래 스크립트 추가.


$(function(){
    paging();
    paging_nation();
});
var view_comment = 5; // 페이지당 보여지는 댓글의 개수
function paging_nation()
{
    $('.pagenation').on('click', function(e){
        var Idx = $(this).index()+1;
        var count = $('.a_comment').length;
        var $a_comment = $('.a_comment');
        var la_page = Idx * view_comment;
        var fr_page = Idx * view_comment - view_comment;
        $a_comment.slice(0).hide();
        $a_comment.slice(fr_page, la_page).show();
        console.log(fr_page, la_page);
        $('.pagenation').removeClass('active');
        $(this).addClass('active');
    }); 
}
function paging()
{
    var count = $('.a_comment').length;
    var $a_comment = $('.a_comment');
    $a_comment.slice(view_comment).hide();
    var paging = '';
    if(count>view_comment){
        var totalpage = Math.floor(count/view_comment)+1;
        for(var i=1;i<=totalpage;i++){
            if(i==1)var active = "active";else var active='';
            //paging += '<a href="javascript:;" class="pagenation" onclick="call_paging('+i+')">'+i+'</a>';
            paging += '<a href="javascript:;" class="pagenation '+active+'">'+i+'</a>';
        }
        $('.paging').html(paging);
    }
    paging_nation();
}

 


<article id="c_<?php echo $comment_id ?>" <?php if ($cmt_depth) { ?>style="margin-left:<?php echo $cmt_depth ?>px;border-top-color:#e0e0e0"<?php } ?>>

 

부분을 찾아  

 


<article class="a_comment" id="c_<?php echo $comment_id ?>" <?php if ($cmt_depth) { ?>style="margin-left:<?php echo $cmt_depth ?>px;border-top-color:#e0e0e0"<?php } ?>>

 

아래와 같이 클래스명을 추가함.

 


    </article>
    <?php } ?>
    <?php if ($i == 0) { //댓글이 없다면 ?><p id="bo_vc_empty">등록된 댓글이 없습니다.</p><?php } ?>
</section>

 

부분을 찾아

 


    </article>
    <?php } ?>
    <?php if ($i == 0) { //댓글이 없다면 ?><p id="bo_vc_empty">등록된 댓글이 없습니다.</p><?php } ?>
    <div style="text-align: center">
    <div class="paging"></div>
    </div>
</section>

 

아래와 같이 변경.

 

style.css

 


/*페이징 */
.paging {
  display: inline-block;text-align: center
}
.paging a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}
.paging a.active {
  background-color: #253dbe;
  color: white;
  border: 1px solid #4CAF50;
}
.paging a:hover:not(.active) {background-color: #253dbe;}

 

아래와 같이 추가.

 

자세한건 스샷과 링크의 페이지에서 확인해주세요.

 

포함된 파일은 그누보드 베이직 기준입니다.

추천10

댓글 전체

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

회원로그인

(주)에스아이알소프트 (06212) 서울시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT