페이지를 넘기지 않고 동일 페이지에서 노출되는 게시물을 조절하고 싶습니다.

푸로마마 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2014.07.28 18:09:42 6163 (118.♡.♡.144)

답변 1

본문

현재 게시판의 최신글을 보여주는 갤러리형 페이지가 있는데요

이걸 일반 게시판 리스트처럼 다음 페이지 번호를 눌러서 넘어가는 게 아니라 게시물 하단의 특정버튼을 눌렀을때 페이지를 이동하지 않고 추가적인 게시물을 노출하고 싶습니다.

예를 들자면 무제한으로 띄우기는 부담될테니 최신글 노출 개수를 50개로 잡자면

페이지 진입시 10개가 보이고 하단의 더보기 버튼을 누르면 원래 보이던 10개 밑에 추가로 10개가 더 노출 하는 식으로 최대 50개까지 노출되게 만들고 싶은데요.

다른 홈페이지들에서 흔히 보이는 기능인데 어떤 식으로 구현해야 할지, 검색을 해 보고 싶어도 정확한 기술(?) 명칭이 무엇인지를 모르겠네요;;

개인적으로는 그냥 50개를 10개 단위로 묶는 DIV가 만들어지도록 최신글 스킨을 수정하고 최초에는 첫번째 DIV외에는 전부 display:none 하고 더 보기 버튼 누를때마다 하나씩 풀리는 식으로 하고 싶은데...

최신글 스킨의 if문에서 10개 단위로 DIV 열고 닫기, 그렇게 생성된 DIV에 각각 다른 ID부여하기가 어떻게 해야될지 힘드네요. 그리고 제일 큰 문제는 버튼 누르면 그냥 딱 노출되는거라서 심미적인 요소가 부족하다는거;;; 애니메이션 같은걸로 서서히 나타나게 한다거나 하고싶은데...

혹시 해당 기술에 대한 샘플같은 게 있을까요??;;

자료나 조언 부탁드리겠습니다 ㅜㅜ

#그누보드4 #javascript

답변 1

드래곤된다 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2014-07-28 18:41:12 210.♡.♡.115

정석은 ajax로 원하는사람이 클릭했을시 10개씩 불러오게해서 db에 무리를 덜어주는게 맞지만 50개정도야머...

더보기 버튼의 id값이 moreBtn일때 기본 클래스는 list10이라고 설정하고 리스트 10개씩 가지고 있는 div들의 class가 각각 list10,20,30,40,50이라고 가정하고선 설명!


<script>
("#moreBtn").click(function(){
	var moreBtn = $(this).attr("class");
	switch(moreBtn){
		case 'list10':
			$(".list20").fadIn();
			$(this).removeClass("list10");
			$(this).addClass("list20");
			break;
		case 'list20':
			$(".list30").fadIn();
			$(this).removeClass("list20");
			$(this).addClass("list30");
			break;
		case 'list30':
			$(".list40").fadIn();
			$(this).removeClass("list30");
			$(this).addClass("list40");
			break;
		case 'list40':
			$(".list50").fadIn();
			$(this).removeClass("list40");
			$(this).addClass("list50");
			break;
	}
}); 
</script>

급하게 작성해서 엉키는건 열심히 푸시길 바래요!!!

작성하다 퇴근시간.... 대충마무리하고 퇴근할께요 ^^