오픈캐스트 스타일 paginate > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

오픈캐스트 스타일 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개

© SIRSOFT
현재 페이지 제일 처음으로