q JQuery

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

855

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

<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>

결과보기