Ω그누보드 페이징의 세련된 디자인(웹표준)

Ω그누보드 페이징의 세련된 디자인(웹표준) 정보

Ω그누보드 페이징의 세련된 디자인(웹표준)

첨부파일

common.lib.php (40.6K) 284회 다운로드 2008-08-17 05:21:58

본문

그누보드의 페이징디자인을

http://daum.net 스타일로 바꾸어봅니다.

바뀐디자인은 아래와 같습니다.

테스트 게시판 주소: http://toeictown.net/bbs/board.php?bo_table=part5

(사진보다는 실물이 훨 나은듯..) ㅡ_ㅡ;

웹표준이구요 이미지 사용없이 모두 css로 되어있습니다.

적용된사이트게시판 주소

http://toeictown.net/bbs/board.php?bo_table=part5

이페이지 에서 보는것과 같이 페이징 부분이 바뀌게됩니다.

추가된것은 기존에 <다음>버튼이 숫자로되서 <다음>검색의 범위로 표시됩니다.

수정해야할파일은

1. /lib/common.lib.php <위에 다운로드할수있게 올려두었습니다.>

2. /skin/board/게시판/list.skin.php <페이징을 적용할 스킨 수정필요>

3. /style.css <사용중인 스타일시트 수정>

1. /lib/common.lib.php
파일을열어 주석부분이 시작되는 부분
function get_paging 를 아래 소스로 덮습니다.

// 현재페이지, 총페이지수, 한페이지에 보여줄 행, URL
function get_paging($write_pages, $cur_page, $total_page, $url, $add="")
{
    $str = "";
    if ($cur_page > 1) {
        $str .= "<a href='" . $url . "1{$add}'>처음</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}'>$pre_count ~ $start_paging</a>";

    if ($total_page > 1) {
        for ($k=$start_page;$k<=$end_page;$k++) {
            if ($cur_page != $k)
                $str .= "<a href='$url$k{$add}' class='numBox;'>$k</a>";
            else
                $str .= "<span class='sel'>$k</span>";
        }
    }
$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}'>$end_paging ~ $page_count</a>";

    if ($cur_page < $total_page) {
        //$str .= "[<a href='$url" . ($cur_page+1) . "'>다음</a>]";
        $str .= "<a href='$url$total_page{$add}'>맨끝</a>";
    }
    $str .= "";

return $str;
}

2. /skin/board/적용게시판/list.skin.php <페이징을 적용할 스킨 수정필요>

적용할 게시판 list.skin.php파을 열어

수정전<스킨마다 구조가 약간씩틀립니다.>

<div style="">
    <? if ($prev_part_href) { echo "<a href='$prev_part_href'><img src='$board_skin_path/img/page_search_prev.gif' border=0 align=absmiddle title='이전검색'></a>"; } ?>
    <?
    // 기본으로 넘어오는 페이지를 아래와 같이 변환하여 이미지로도 출력할 수 있습니다.
    //echo $write_pages;
    $write_pages = str_replace("처음", "<img src='$board_skin_path/img/page_begin.gif' border='0' align='absmiddle' title='처음'>", $write_pages);
    $write_pages = str_replace("이전", "<img src='$board_skin_path/img/page_prev.gif' border='0' align='absmiddle' title='이전'>", $write_pages);
    $write_pages = str_replace("다음", "<img src='$board_skin_path/img/page_next.gif' border='0' align='absmiddle' title='다음'>", $write_pages);
    $write_pages = str_replace("맨끝", "<img src='$board_skin_path/img/page_end.gif' border='0' align='absmiddle' title='맨끝'>", $write_pages);
    $write_pages = preg_replace("/<span>([0-9]*)<\/span>/", "<b>$1</b>", $write_pages);
    $write_pages = preg_replace("/<b>([0-9]*)<\/b>/", "<b>$1</b>", $write_pages);
    ?>
    <?=$write_pages?>
    <? if ($next_part_href) { echo "<a href='$next_part_href'><img src='$board_skin_path/img/page_search_next.gif' border=0 align=absmiddle title='다음검색'></a>"; } ?>

</div>

수정후

<div id="pagingNew"> <?=$write_pages?></div>

그냥  이 주석 밑으로 다음주석이 나올떄까지 다지고 위에
<div id="pagingNew"> <?=$write_pages?></div>
요곳만 추가해주시면됩니다.

3. /style.css <사용중인 스타일시트 수정>

사용중인 스타일 시트 파일 최하단에 다음 코드를 추가합니다.

#pagingNew {clear:both;font:13px AppleGothic,Verdana;margin:10px 0px 10px 0px;text-align:center;width:743px;}
#pagingNew a {border:1px solid #ececec;height:23px;text-decoration:none;padding:2px 5px 0px 5px;margin-left:4px;font-weight:bold;}
#pagingNew a:hover {border:1px solid #95a5ff;color:#6671ff;}
#pagingNew .sel {border:1px solid #95a5ff;color:#6671ff;font-weight:bold;height:23px;padding:2px 5px 0 5px;margin-left:4px;}
#pagingNew .numBox {color:#000;font-weight:bold;padding:2px 5px 0px 5px;}
#pagingNew .numPrev {background:url("http://imgsrc.search.daum-img.net/search_all/2008_new/200806/bll_01.gif") no-repeat 5px 6px;color:#000;height:23px;margin-right:4px;overflow:hidden;padding:2px 5px 1px 15px;}
#pagingNew .numNext {color:#000;margin-left:4px;padding:2px 2px 1px 0px;}
#pagingNew em {background:url("http://imgsrc.search.daum-img.net/search_all/2008_new/200806/blr_01.gif") no-repeat right 4px;padding:0 11px 0 5px;}

http://daum.net에서 사용하는 스타일 시트구요 필요없는 부분도있는데 자신의 디자인으로 고치도록 걍 놔둡니다.

2시간동안 이거 썻셈

지금당장 바꿔야합니다.

댓글 25개

끙디자이너 자기소개 아이디로 검색 회원게시물

그누4 팁자료실

관련링크

첨부파일

본문

공유하기

댓글 25개