back

  • person_pin
  • calendar_today
  • remove_red_eye

[그누보드5/그누보드스킨] 무한스크롤 가능한 게시판 스킨

페이지 정보

작성자 webpaper 댓글 0건 조회 407회 작성일 19-02-22 13:18

본문

스크롤을 통해서 다음글을 불러오고, 혹은 이전글을 불러오는 스킨입니다. 

작업하면서 고민한 점은 페이징 처리입니다. 게시글을 들어가고, 글을 확인 한 다음 다시 목록으로 돌아왔을 때 

어떻게 보여줄 것인가를 고민하다 마우스 스크롤을 올리면 이전글을 불러오는 형태의 스킨을 구현해보았습니다. 

스크롤 부분은 이렇습니다. 
 

	$(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);
			}  
		});
	}



[예시화면 - 다음글 불러오기]

61a2d56f20691c9a8c449e11b80f74b5_1550808995_4969.gif



[예시화면 - 이전글 불러오기]

61a2d56f20691c9a8c449e11b80f74b5_1550809004_3728.gif



[스킨다운로드]

 

 

[테스트페이지]