팁/튜토리얼

댓글 새로고침 버튼 만들기

파파즈
2016.04.05 05:12
3,550
9
61

궁금하다고 쪽지주신 분이 계셔서.. 비교적 간단한거라 팁으로 올려드립니다.

CSS스피너와 jquery를 이용한 방법입니다.

 

(스케치북 게시판 기준)

 

reload2.gif

 

 

1. HTML

_read.html 적당한 위치에 다음 태그를 넣어주세요

 

<button class="comment-reload" onclick="commentReload({$oDocument->document_srl})">
  <span>댓글 새로고침</span>
  <div class="loading-spinner"></div>
</button>

 

 

 

2. CSS

board.css 적당한 위치에 다음 코드를 넣어주세요.

 

.bd button.comment-reload {position:relative; width:100px; height:32px; background-color:#54639e; color:#fff; text-align:center; border:none}

.bd .loading-spinner {
z-index:2; position:absolute; display:none; border:3px 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:20px; width:20px; top:6px; left:40px; background-color:#54639e;
}

@-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)}
}

 

 

 

3. JS

board.js 맨 위에 다음 코드를 넣어주세요.

 

function commentReload(target_srl) {
  var reqUrl = current_url.setQuery('mid', current_mid, 'document_srl', target_srl);
  jQuery('.loading-spinner').show();
  jQuery('.comment-reload > span').hide();

  jQuery.ajax ({
    url:reqUrl,
    dataType:'html',
    success: function(data) {
      var a = jQuery(data),
      b = a.find('#cmtPosition').html();
      jQuery('#cmtPosition').html(b);
    },

    complete: function() {
      setTimeout(function() {
        jQuery('.loading-spinner').fadeOut(); 
        jQuery('.comment-reload > span').fadeIn();
      }, 500)
    }
  });
}

 

 

 

잘 안되시는 분은 댓글로 질문주시면 답변 드리겠습니다.

목록

댓글 61

  • 고양이
    2016.04.05 12:33 #249421
    모바일에서도 밑으로 더보기 누르면 리스트 더보고 이런거 있지 않나요?
    추천 0
  • 웹지기
    2016.04.05 12:42 #249429
    대형사이트들 보면 모바일에도 하는 경우가 있고 PC에만 하는 경우도 있더라구요.
    추천 0
  • 아우
    2016.04.05 15:42 #249595
    움짤의 마우스가 움직여서 순간적으로 반대쪽으로 끌어ㅆ.....
    추천 0
  • 웹지기
    2016.04.06 01:43 #249802
    저희는 모바일에도 똑같이 달아줬어요~
    추천 0
  • 웹지기
    2016.04.07 05:31 #250946

    flat모바일에 적용하고 싶은 분들 첨부한 js파일로 덮어주시면 댓글작성,댓글터치시레이어팝업 이상없습니다.

    proto님께서 수정해주셨습니다.

     

    이 파일에 ajax 처리가 되어있으니 js파일은 따로 건드리실 필요가 없구 html/css 작업만 하시면 됩니다.

    추천 0
  • 기븐
    2016.04.14 11:35 #257413

    한 가지 문제가 있네요. 다른 경우는 제대로 되는 거 같은데, "대댓글을 작성하던 도중" 새로고침 버튼을 누를 경우 더 이상 대댓글 창이 펼쳐지지 않네요. 다른 분들도 그런가요?

    @웹지기

    확인 좀 부탁드립니다

    (그니까 대댓글을 입력하는 창을 띄우고 내용을 입력하던 도중에 새로고침 버튼을 누르면, 그 다음부터는 그 페이지 전체를 새로고침하기 전까지는 댓글 옆에 "댓글" 버튼을 눌러도 대댓글 창이 활성화가 안 된다는 뜻입니다.)

    혹시 앞에 @간장게장 님이 말씀하신 댓글 안 달린다는 증상이 이런건가요?

     

    (사실 이럴 일은 드물어서 별로 상관없을 수도 있긴 합니다. 저도 방금 아주 우연한 실수를 통해 깨달았네요. 애초에 댓글 쓰다가 그 버튼을 누를 일은 없어서...)

    추천 0
  • 웹지기
    2016.04.14 11:48 #257422
    스케치북5 스킨을 말씀하시는 것 같은데 대댓글을 누르고 새로고침을 다시 누르는 액션 자체가 이상한거라 저는 별 문제로 보지 않고 있습니다.
    말씀 하신대로 댓글에 대댓글을 달으려다가 이를 중단하고 새로고침을 누르면 다시 대댓글을 시도하면 댓글 창이 열리지 않죠. js 동작에 영향을 줄 수 밖에 없을 겁니다.

    하지만 이런 경험을 할 경우는 극히 드물기도 하고 별 문제가 아닌것으로 판단하고 저는 그냥 넘깁니다.
    추천 0
  • 기븐
    2016.04.14 14:50 #257538
    그렇군요
    추천 0
  • 희스깅
    2016.06.30 14:28 #315143
    board.js 가 없는 경우
    어디가 가능한가요?
    추천 0
  • 메테워
    2016.08.29 06:41 #362676
    PJAXboard에서 새로고침까지는 적용했는데 새로고침후 댓글의 답글/수정/삭제버튼을
    누르면 먹통이 되네요 ㅠㅠ
    추천 0
  • 구미호
    2018.08.24 15:04 #1048055
    저는 버튼만 되고 댓글이 추가로 내려 오지 않네요 추가된것만큼 밑으로 늘어나야 하는데 안그러네요 ㅎㅎ
    감사합니다
    추천 0
1 2
1 2 3 4 5