[jquery] JQ - 콘텐츠를 일정 높이 기준으로 페이징 처리 (= 본문 내용을 일정 높이 단위로 페이지 처리) ※ 이전/다음 | prev/next | pagination (패지네이션)

콘텐츠를 일정 높이 기준으로 페이징 처리

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<style type="text/css" media="screen">

.box {margin:auto; height:210px; width:300px; position:relative; overflow:hidden; border:1px solid gray;}

</style>

<div id='box' class="box">

</div>

<ul>

    <li class='prev'>이전</li>

    <li class='next'>다음</li>

</ul>

<script>

var txt = '';

for(var i = 1 ; i <= 300 ; i++) {

    txt += i + '<br>'; 

}

box.innerHTML = txt;

 

$(".box").contents().wrapAll('<div class="content"/>');

$(".next").click(function () {

  var current = $(".content").css("margin-top") || "0px";

  if (parseInt(current.substring(0, current.length - 2)) >=

    $(".content").height() * -1 + $(".box").height()) {

    $(".content").css(

      "margin-top", current.substring(0, current.length - 2) -

        $(".box").height() + "px"

    );

  }

});

$(".prev").click(function () {

  var current = $(".content").css("margin-top") || "0px";

  if (parseInt(current.substring(0, current.length - 2)) != 0) {

    $(".content").css(

      "margin-top", parseInt(current.substring(0, current.length - 2)) + $(".box").height() + "px"

    );

  }

});

</script>

 

결과보기 

(220423) https://stackoverflow.com/questions/2030125

PS. [주의]

contents() 대신 children() 메서드 사용하면, txt += i + '<br>'; 부분을 txt += '<div>' + i + '</div>'; 코드로 변경해야 정상 작동. 

• contents() 메서드 - 텍스트와 주석 포함 O 한 모든 자식요소
• children() 메서드 - 텍스트와 주석 포함 X 한 모든 자식요소