[그누보드5/그누보드스킨] 무한스크롤 가능한 게시판 스킨
스크롤을 통해서 다음글을 불러오고, 혹은 이전글을 불러오는 스킨입니다. 작업하면서 고민한 점은 페이징 처리입니다. 게시글을 들어가고, 글을 확인 한 다음 다시 목록으로 돌아왔을 때 어떻게 보여줄 것인가를 고민하다 마우스 스크롤을 올리면 이전글을 불러오는 형태의 스킨을 구현해보았습니다. 스크롤 부분은 이렇습니다. $(window).scroll(function(){ // 최하단일 경우를 체크하기 위해 최하단 위치값을 지정 // 화면 문서전체의 길이에서, 현재 창 높이를 뺀 것이 최하단 값 var chkBtm = parseInt($(document).height()) - parseInt($(window).height()); if(chkBtm == $(window).scrollTop()){ // 최하단으로 도달했을 경우 console.log('바닥입니다!'); }else if($(window).scrollTop() == 0){ // 최상단으로 도달했을 경우 console.log('꼭대기입니다!'); } });그럼 이제 페이지값으로 게시물을 불러옵니다. function callContent(a,b){ // a = 페이지값 // b = 이전글을 불러올지, 다음글을 불러올지 체크 // 그누보드 list.skin.php 파일일 경우의 URL var url = "<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&page="+a; var tbody = ""; var thtml = ""; $.ajax({ type:"POST", url:url, dataType : "html", success: function(html){ // 그누보드의 경우 리스트가 tbody안에 있기 때문에 이렇게 구분해서, 내용만 가져옴 // 정규식으로 처리할 수 도 있지만, 귀찮아서,, tbody = html.split('<tbody>'); thtml = tbody[1].split('</tbody>'); // 목록을 너무 바로 불러오기 때문에 1초의 여유를 둠 setTimeout(function() { if(b=='append'){ // append : 리스트 밑으로 붙임 $(".tbl_head01").find('tbody').append(thtml[0]); }else{ // prepend : 리스트 위로 붙임 $(".tbl_head01").find('tbody').prepend(thtml[0]); } }, 1000); }, error: function(xhr, status, error) { alert(error); } }); }[예시화면 - 다음글 불러오기][예시화면 - 이전글 불러오기][스킨다운로드] 무한스크롤 게시판 스킨 > SIR스크롤로 게시글을 불러오는 게시판 스킨입니다.
https://sir.kr/g5_skin/20427
Group By EYE님의 게시물을 조금 참고해서 만들 스킨입니다.
스크롤로 게시물을 불러오는 방식은 많이 있지만 제가 선택한 것은
ajax로 게시판을 호출해서 그 게시판의 목록만 가져와서 현 게시판에 붙이는 형태입니다.
Group By EYE님과 조금 다른 점은 게시물을 클릭하고 들어갔…https://sir.kr/g5_skin/27677 [테스트페이지] web.paper | 더보기스크롤 1 페이지 | 그누보드5더보기스크롤 1 페이지 | 그누보드5http://webpaper.kr/youngcart/bbs/board.php?bo_table=auto_scroll
calendar_today19-02-22 13:18
remove_red_eye898
favorite_border0