네이버 페이징 똑같이하기 정보
네이버 페이징 똑같이하기
본문
에그당님팁 활용입니다.
http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=16470&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%C6%E4%C0%CC%C2%A1&sop=and
http://html.nhndesign.com/guidelines/pattern/naver/paginate/paginateSearchDefault.html
이거랑 똑같고 처음과 맨끝이 추가되었습니다.
고로 네이버보다 좋은거 ㅋㅋㅋ
css는 네이버꺼보시도 다른스타일 먹이셔도 됩니다.

추가된것은 기존에 <다음>버튼이 숫자로되서 <다음>검색의 범위로 표시됩니다.
수정해야할파일은
.paginate .pre_all { margin-right:6px; padding:7px 6px 5px 6px; _padding-bottom:1px; background:url(http://static.naver.com/common/paginate/bu_pg3_l_off.gif) no-repeat 6px 9px !important; letter-spacing:-1px;}
.paginate .next_all { margin-left:4px; padding:7px 6px 5px 6px; _padding-bottom:1px; background:url(http://static.naver.com/common/paginate/bu_pg3_r_off.gif) no-repeat 36px 9px !important; letter-spacing:-1px;}
.paginate a.pre_all { background:url(http://static.naver.com/common/paginate/bu_pg3_l_on.gif) no-repeat 6px 9px !important;}
.paginate a.next_all { background:url(http://static.naver.com/common/paginate/bu_pg3_r_on.gif) no-repeat 36px 9px !important;}
.paginate .pre_all, .paginate .next_all { display:inline-block; color:#ccc; border:1px solid #e9e9e9; position:relative; top:0; _top:-2px; font:12px/normal 굴림, Gulim; _width /**/:50px; _height /**/:24px;}
.paginate a.pre_all,
.paginate a.next_all { color:#565656;}
http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=16470&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%C6%E4%C0%CC%C2%A1&sop=and
http://html.nhndesign.com/guidelines/pattern/naver/paginate/paginateSearchDefault.html
이거랑 똑같고 처음과 맨끝이 추가되었습니다.
고로 네이버보다 좋은거 ㅋㅋㅋ
css는 네이버꺼보시도 다른스타일 먹이셔도 됩니다.

추가된것은 기존에 <다음>버튼이 숫자로되서 <다음>검색의 범위로 표시됩니다.
수정해야할파일은
1. /lib/common.lib.php
2. /skin/board/게시판/list.skin.php <페이징을 적용할 스킨 수정필요>
3. /style.css <사용중인 스타일시트 수정>
1. /lib/common.lib.php
파일을열어 주석부분이 시작되는 부분
function get_paging 를 아래 소스로 덮습니다.
파일을열어 주석부분이 시작되는 부분
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}' class='pre_all'>처음</a>";
$str .= "<a href='" . $url . ($cur_page-1) . "' class='pre'>이전페이지</a>";
}
else
{
$str .= "<span class='pre_all'>처음</span>";
$str .= "<span class='pre'>이전페이지</span>";
}
$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 .= "<strong>$k</strong>";
}
}
$end_paging=$end_page +1;
$page_count=$end_page+$write_pages;
if($total_page < $page_count) $page_count=$total_page;
function get_paging($write_pages, $cur_page, $total_page, $url, $add="")
{
$str = "";
if ($cur_page > 1) {
$str .= "<a href='" . $url . "1{$add}' class='pre_all'>처음</a>";
$str .= "<a href='" . $url . ($cur_page-1) . "' class='pre'>이전페이지</a>";
}
else
{
$str .= "<span class='pre_all'>처음</span>";
$str .= "<span class='pre'>이전페이지</span>";
}
$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 .= "<strong>$k</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}'>$end_paging ~ $page_count</a>";
if ($cur_page < $total_page) {
$str .= "<a href='$url" . ($cur_page+1) . "' class='next'>다음페이지</a>";
$str .= "<a href='$url$total_page{$add}' class='next_all'>맨끝</a>";
}
else
{
$str .= "<span class='next'>다음페이지</span>";
$str .= "<span class='next_all'>맨끝</span>";
}
$str .= "";
return $str;
}
if ($cur_page < $total_page) {
$str .= "<a href='$url" . ($cur_page+1) . "' class='next'>다음페이지</a>";
$str .= "<a href='$url$total_page{$add}' class='next_all'>맨끝</a>";
}
else
{
$str .= "<span class='next'>다음페이지</span>";
$str .= "<span class='next_all'>맨끝</span>";
}
$str .= "";
return $str;
}
2. /skin/board/적용게시판/list.skin.php <페이징을 적용할 스킨 수정필요>
적용할 게시판 list.skin.php파을 열어
수정전<스킨마다 구조가 약간씩틀립니다.>
<!-- 페이지 -->
적용할 게시판 list.skin.php파을 열어
수정전<스킨마다 구조가 약간씩틀립니다.>
<!-- 페이지 -->
<div>
<? 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>"; } ?>
<? 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>
수정후
<!-- 페이지 -->
<? if ($prev_part_href) { echo "<a href='$prev_part_href'>이전검색</a>"; } ?>
<div class="paginate"><?=$write_pages?></div>
<? if ($next_part_href) { echo "<a href='$next_part_href'>다음검색</a>"; } ?>
그냥 <!--페이지--> 이 주석 밑으로 다음주석이 나올떄까지 다지고 위에
<div id="pagingNew"> <?=$write_pages?></div>
요곳만 추가해주시면됩니다.
수정후
<!-- 페이지 -->
<? if ($prev_part_href) { echo "<a href='$prev_part_href'>이전검색</a>"; } ?>
<div class="paginate"><?=$write_pages?></div>
<? if ($next_part_href) { echo "<a href='$next_part_href'>다음검색</a>"; } ?>
그냥 <!--페이지--> 이 주석 밑으로 다음주석이 나올떄까지 다지고 위에
<div id="pagingNew"> <?=$write_pages?></div>
요곳만 추가해주시면됩니다.
3. /style.css <사용중인 스타일시트 수정>
사용중인 스타일 시트 파일 최하단에 다음 코드를 추가합니다.
/* 페이징 */
.paginate { padding:15px 0; text-align:center;}
.paginate a,
.paginate strong { position:relative; display:inline-block; margin-right:1px; padding:3px 3px 5px 3px; color:#000; text-decoration:none; border:1px solid #ffffff; font:bold 13px/normal Verdana; _width /**/:17px;}
.paginate strong { color:#f23219 !important; border:1px solid #e9e9e9;}
.paginate .pre { margin-right:9px; padding:7px 6px 5px 16px; _padding-bottom:3px; background:url(http://static.naver.com/common/paginate/bu_pg3_l_off.gif) no-repeat 6px 9px !important;}
.paginate .next { margin-left:9px; padding:7px 16px 5px 6px; _padding-bottom:3px; background:url(http://static.naver.com/common/paginate/bu_pg3_r_off.gif) no-repeat 71px 9px !important;}
*:first-child+html .paginate .pre,
*:first-child+html .paginate .next { top:-1px; padding-bottom:3px;}
.paginate a.pre { background:url(http://static.naver.com/common/paginate/bu_pg3_l_on.gif) no-repeat 6px 9px !important;}
.paginate a.next { background:url(http://static.naver.com/common/paginate/bu_pg3_r_on.gif) no-repeat 71px 9px !important;}
.paginate .pre,
.paginate .next { display:inline-block; color:#ccc; border:1px solid #e9e9e9; position:relative; top:1px; _top:-1px; font:12px/normal 굴림, Gulim; _width /**/:84px; _height /**/:24px;}
.paginate a.pre,
.paginate a.next { color:#565656;}
.paginate a:hover { background-color:#f7f7f7 !important; border:1px solid #e9e9e9;}
사용중인 스타일 시트 파일 최하단에 다음 코드를 추가합니다.
/* 페이징 */
.paginate { padding:15px 0; text-align:center;}
.paginate a,
.paginate strong { position:relative; display:inline-block; margin-right:1px; padding:3px 3px 5px 3px; color:#000; text-decoration:none; border:1px solid #ffffff; font:bold 13px/normal Verdana; _width /**/:17px;}
.paginate strong { color:#f23219 !important; border:1px solid #e9e9e9;}
.paginate .pre { margin-right:9px; padding:7px 6px 5px 16px; _padding-bottom:3px; background:url(http://static.naver.com/common/paginate/bu_pg3_l_off.gif) no-repeat 6px 9px !important;}
.paginate .next { margin-left:9px; padding:7px 16px 5px 6px; _padding-bottom:3px; background:url(http://static.naver.com/common/paginate/bu_pg3_r_off.gif) no-repeat 71px 9px !important;}
*:first-child+html .paginate .pre,
*:first-child+html .paginate .next { top:-1px; padding-bottom:3px;}
.paginate a.pre { background:url(http://static.naver.com/common/paginate/bu_pg3_l_on.gif) no-repeat 6px 9px !important;}
.paginate a.next { background:url(http://static.naver.com/common/paginate/bu_pg3_r_on.gif) no-repeat 71px 9px !important;}
.paginate .pre,
.paginate .next { display:inline-block; color:#ccc; border:1px solid #e9e9e9; position:relative; top:1px; _top:-1px; font:12px/normal 굴림, Gulim; _width /**/:84px; _height /**/:24px;}
.paginate a.pre,
.paginate a.next { color:#565656;}
.paginate a:hover { background-color:#f7f7f7 !important; border:1px solid #e9e9e9;}
.paginate .pre_all { margin-right:6px; padding:7px 6px 5px 6px; _padding-bottom:1px; background:url(http://static.naver.com/common/paginate/bu_pg3_l_off.gif) no-repeat 6px 9px !important; letter-spacing:-1px;}
.paginate .next_all { margin-left:4px; padding:7px 6px 5px 6px; _padding-bottom:1px; background:url(http://static.naver.com/common/paginate/bu_pg3_r_off.gif) no-repeat 36px 9px !important; letter-spacing:-1px;}
.paginate a.pre_all { background:url(http://static.naver.com/common/paginate/bu_pg3_l_on.gif) no-repeat 6px 9px !important;}
.paginate a.next_all { background:url(http://static.naver.com/common/paginate/bu_pg3_r_on.gif) no-repeat 36px 9px !important;}
.paginate .pre_all, .paginate .next_all { display:inline-block; color:#ccc; border:1px solid #e9e9e9; position:relative; top:0; _top:-2px; font:12px/normal 굴림, Gulim; _width /**/:50px; _height /**/:24px;}
.paginate a.pre_all,
.paginate a.next_all { color:#565656;}
추천
11
11
댓글 10개

옵션님 감사합니다 바로 적용해봤더니 이쁘네요 ㅋ

좋네요. 참고하겠습니다!
오우 너무 좋군요..관리자 페이지도 다 똑같이 적용했는데 아주 좋터군요..
adm/ admin.style.css 에 위에 스타일시트를 추가 해줘야 되더군요..
그리고 어드민 페이지에 <td width=50% align=center>$pagelist<td> 이부분을 찾아서
<td width=90% align=center><div class=paginate>$pagelist</div><td> 요렇게 하시고
50%를 아래처럼 퍼센트를 늘려주셔야 정상적으로 나오더군요..
두군데있더군요..윗쪽은 대략 10-20% 아랫쪽은 거기게 맞게 늘려주심 될듯해요..
감사합니다..
adm/ admin.style.css 에 위에 스타일시트를 추가 해줘야 되더군요..
그리고 어드민 페이지에 <td width=50% align=center>$pagelist<td> 이부분을 찾아서
<td width=90% align=center><div class=paginate>$pagelist</div><td> 요렇게 하시고
50%를 아래처럼 퍼센트를 늘려주셔야 정상적으로 나오더군요..
두군데있더군요..윗쪽은 대략 10-20% 아랫쪽은 거기게 맞게 늘려주심 될듯해요..
감사합니다..

덕분에 고민사항 모두 해결했습니다. 감사합니다. 이걸 토대로 수정할 것이 좀 많습니다. 특히, 영카트 쓰시는 분들은 무슨 말인지 아실 듯...
참조
네이버 페이징 똑같이하기
멋있는 네이버 페이징

p;k
비슷한거 적용해봤었는데 좀 이상하던데 다시 해봐야겠네요!
좋은자료 감사합니다.
좋은자료 감사합니다.
일부 어려움이 좀 있었지만 적용하고 나니 너무 갈끔하네요!!
중간 메뉴 1픽셀씩 밑으로 밀려나는 부분등 조정하고 이미지url
대체해서 css수정하였는데 만족스러운 페이징이 나와서 좋습니다.
중간 메뉴 1픽셀씩 밑으로 밀려나는 부분등 조정하고 이미지url
대체해서 css수정하였는데 만족스러운 페이징이 나와서 좋습니다.