오픈캐스트 스타일 paginate 정보
오픈캐스트 스타일 paginate
관련링크
본문
네이버 오픈캐스트 스티일 페이지 입니다.
네이버에서 공개한 UI라 사용사의 문제는 없습니다
아마 <!DOCTYPE> 이 선언되야 할껍니다
테스트 게시판 : http://chaosnet.pe.kr/1@
/lib/common.lib.php
// 현재페이지, 총페이지수, 한페이지에 보여줄 행, URL
function get_paging($write_pages, $cur_page, $total_page, $url, $add="")
{
$str = "";
if ($cur_page > 1) {
$str .= "<a href='" . $url . "1{$add}' class='pre'><img src='$g4[path]/img/btn_page_start.gif' width='56' height='27' alt='처음' class='ppre'></a>";
//$str .= "[<a href='" . $url . ($cur_page-1) . "'>이전</a>]";
}
$start_page = ( ( (int)( ($cur_page - 1 ) / $write_pages ) ) * $write_pages ) + 1;
$end_page = $start_page + $write_pages - 1;
if ($end_page >= $total_page) $end_page = $total_page;
$pre_count = $start_page-$write_pages;
if($pre_count <= 0)$pre_count=1;
$start_paging=$start_page-1;
if ($start_page > 1) $str .= "<a href='" . $url . ($start_page-1) . "{$add}' class='pre'><img src='http://static.naver.com/common/paginate/btn_page_prev.gif' width='56' height='27' alt='이전' class='ppre'></a>";
if ($total_page > 1) {
for ($k=$start_page;$k<=$end_page;$k++) {
if ($cur_page != $k)
$str .= "<a href='$url$k{$add}' ><span>$k</span></a>";
else
$str .= "<strong><span>$k</span></strong>";
}
}
$end_paging=$end_page +1;
$page_count=$end_page+$write_pages;
if($total_page < $page_count) $page_count=$total_page;
if ($total_page > $end_page) $str .= "<a href='" . $url . ($end_page+1) . "{$add}' class='next'><img src='http://static.naver.com/common/paginate/btn_page_next.gif' width='57' height='27' alt='다음' /></a>";
if ($cur_page < $total_page) {
//$str .= "[<a href='$url" . ($cur_page+1) . "'>다음</a>]";
$str .= "<a href='$url$total_page{$add}' class='next'><img src='$g4[path]/img/btn_page_end.gif' width='57' height='27' alt='맨끝' /></a>";
}
$str .= "";
return $str;
}
교체 후
css 추가
* {margin:0; padding:0; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
img{border:0;}
/* Paginate */
#paging {clear:both; overflow:hidden; zoom:1; margin:0 auto; padding:29px 0 0 0; text-align:center;}
#paging a {_position:relative; display:-moz-inline-box; display:inline-block; margin-right:-3px; padding:0px 0px 0px 5px; color:#666; text-decoration:none !important; line-height:normal; font:bold 12px 돋움,Dotum; line-height:28px;}
#paging a:hover,
#paging a:focus,
#paging a:active{background:url(http://static.naver.com/common/paginate/bg_page_nav_ru.gif) no-repeat left top !important;}
#paging strong {_position:relative; display:-moz-inline-box; display:inline-block; margin-right:3px;margin-left:5px; padding:0px 0px 0px 5px; color:#666; text-decoration:none !important; line-height:normal; font:bold 12px 돋움,Dotum; line-height:28px; background:url(http://static.naver.com/common/paginate/bg_page_nav_ru.gif) no-repeat left top !important;}
#paging strong {color:#01939c !important;}
#paging a span{position:relative; top:0; zoom:1; padding:0 12px 0 3px; display:block; _display:inline;}
#paging a:hover span,
#paging a:focus span,
#paging a:active span{text-decoration:underline; background:url(http://static.naver.com/common/paginate/bg_page_nav_ru.gif) no-repeat right top !important; cursor:pointer;}
#paging strong span{position:relative; top:0; zoom:1; padding:0 8px 0 3px; display:block; _display:inline; background:url(http://static.naver.com/common/paginate/bg_page_nav_ru.gif) no-repeat right top !important;}
/* user option */
#paging a.pre{position:relative; top:9px; font:12px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; background:none !important;margin-right:2px;}
#paging a.next{position:relative; top:9px; font:12px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; background:none !important;}
#paging a.pre:hover,
#paging a.pre:focus,
#paging a.pre:active,
#paging a.next:hover,
#paging a.next:focus,
#paging a.next:active{background:none !important;}
#paging a.numPrev{margin-right:20px;}
#paging a.numNext{margin-left:8px;}
이후 스킨에서 해당 부분을 아래처럼 수정
<!-- 페이지 -->
<div id="paging"> <?=$write_pages?></div>
버튼이미지는 해당링크를 통해 다운받아서 자신에게 맞게 고쳐쓰시면 됩니다.
common.lib.php 에 버튼 이미지 입니다.
http://chaosnet.pe.kr/img/btn_page_start.gif
http://chaosnet.pe.kr/img/btn_page_end.gif
2
댓글 2개
