반응형페이징!
반응형웹만들때 페이징때문에 고민하셨죠? 간편하게 제가 하나만들었습니다ㅎ
[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
댓글 14개
c = 35 , // 전체페이지(35페이지) 이부분을
c = <?php echo $total_page?> , 로 수정해주시고
current = 1; // 현재페이지(1페이지) 이부분을
current = <?php echo $page ?>; 로 수정해주시면됩니다.
디자인은 알아서^^;
25번줄과 26번줄 구문 사이에 이스크립트를 추가시키면됩니다.
[code]
$(location).attr('href',<?php echo g5_bbs_url ?> + '/board.php?bo_table=' + <?php echo $bo_table ?> + '&page=' + current );
[/code]
근데, 대체 뭘 공부하면 이런 걸 짤 수 있죠? ㅎ
외국사이트돌아다니면서 소스도 한번씩 파헤쳐보고...ㅎ;
제가 반응형웹을 처음 접하게된게 아마 2013년때쯤이었을껍니다.. 그러다가 css로 반응형웹을 짜는기술도 있공...자유롭게 하는방법에선 자바스크립트가 짱이더라고요ㅎ;