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

참고: 인기 테마인 BE 테마(33%)The 7(35%) 할인 행사를 진행하고 있습니다.
참고

다음 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개 항목이 로드됩니다.

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.