반응형페이징!

반응형웹만들때 페이징때문에 고민하셨죠? 간편하게 제가 하나만들었습니다ㅎ

[code]​

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script> 

<style type="text/css">

.paging{color:#555;padding:0;}

.paging li{list-style:none;}

.paging li{line-height:25px; cursor:default; text-align:center; width:25px; height:25px; display:inline-block; font-size: 12px; font-weight:bold; color:#333;}

.paging .pg:hover{cursor:pointer; text-decoration: underline}

.paging .current{color:#FF3636; cursor:default !important; text-decoration:none !important;}

.first, .pre, .next, .last{color:#888 !important;}

.first, .last{letter-spacing:-3px;}

.active{color:#333 !important; cursor:pointer !important;}

</style>

<script type="text/javascript">​

window.onload = function() {

var n = 0,

    c  = 35 , // 전체페이지(35페이지)

    w = 27 , //페이지표시 1개의 가로사이즈값

    current = 1; // 현재페이지(1페이지)

/* 페이지클릭시 */

$(document).delegate('.pg','click',function(e){

current = parseInt($(this).text());

$('.pg').removeClass('current');$(this).addClass('current'); // 페이지 클릭시 추가되는 클래스(current)

});

/* 맨앞, 앞, 뒤, 맨뒤 버튼 클릭시 */

$(document).delegate('.first, .pre, .next, .last','click',function(e){

var x = Math.floor((parseInt($('.paging').css('width'))-w*4)/w);

if(x > 10){x=10;}

if(n >= 1){

if($(this).is('.first')){current=1;paging();}

if($(this).is('.pre')){current=n-x+1;paging();}

} 

if(c > n+x){

if($(this).is('.next')){current=n+x+1;paging();}

if($(this).is('.last')){current=c;paging();}

}

});

/* 맨앞, 앞, 뒤, 맨뒤 버튼 클릭시 */

function paging(){

var page='<li class="first"><<</li><li class="pre"><</li>';

var x = Math.floor((parseInt($('.paging').css('width'))-w*4)/w);

if(x > 10){x=10;}

n = Math.floor(current/x);

if(n == current/x){n = n*x-x;}else{n = n*x}

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

if(current == i+n){

page += '<li class="pg current">'+(i+n)+'</li>';

}else{

page += '<li class="pg">'+(i+n)+'</li>';}

if(i == x || i == 10 || i+n == c){$('.paging').html(page+'<li class="next">></li><li class="last">>></li>');

if(n > 1){$('.first, .pre').addClass('active');}  // 맨앞, 앞 활성화시 추가되는 클래스(active)

if(c > n+x){$('.next, .last').addClass('active');}  // 뒤, 맨뒤 버튼 활성화시 추가되는 클래스(active)

break}}

}

paging() //웹페이지 불러올시 반응형페이징 함수 작동

window.onresize = function(){paging()}  //브라우저 사이즈 조절시 반응형페이징 함수 작동

}

</script>

<ul class="paging"></ul> <!-- 반응형페이징을 불러올 위치 -->

[/code]​

​

군인신분으로 사이버지식정보방에서 만든거라 보안상 파일업로드가 안되므로 글로 올리는점 양해바랍니다.

http://sir.co.kr/bbs/board.php?bo_table=cm_free&wr_id=1113337