'Load More'(더 보기) 버튼 추가하기(jQuery)

다음 jQuery를 사용하여 "Load More"(더 보기) 버튼을 추가할 수 있습니다. 예를 들어, 전체 항목이 100개이고 초기에 10개(혹은 20개)가 표시되어 있고 "더 보기"를 클릭하면 10개씩 표시되도록 하고자 할 경우 등에 사용할 수 있습니다.

$(function(){
$("div").slice(0, 10).show(); // 최초 10개 선택
$("#load").click(function(e){ // Load More를 위한 클릭 이벤트e
e.preventDefault();
$("div:hidden").slice(0, 10).show(); // 숨김 설정된 다음 10개를 선택하여 표시
if($("div:hidden").length == 0){ // 숨겨진 DIV가 있는지 체크
alert("더 이상 항목이 없습니다"); // 더 이상 로드할 항목이 없는 경우 경고
}
});
});
// Source: http://stackoverflow.com/

• 데모

이 코드를 워드프레스 플러그인인 KBoard 게시판에 적용해보았습니다. 여기에서 테스트해보실 수 있습니다. 기본적으로 5개 항목이 표시되어 있고 "더 보기"를 누르면 추가로 5개 항목이 로드됩니다. (케이보드 게시판은 모두 삭제했습니다.)

워드프레스에서 Ajax Load More 버튼을 추가하는 방법은 다음 글을 참고해보세요.

• 워드프레스에서 Load More(더 보기) 버튼을 추가하는 방법

참고:

• 워드프레스에서 무한 스크롤 기능 사용하기