페이징 네이버 스타일 따라하기 정보
페이징 네이버 스타일 따라하기첨부파일
본문
1. 소스추가
../lib/common.lib.php 에 아래 함수 추가// 현재페이지, 총페이지수, 한페이지에 보여줄 행, URL
function get_jy_paginate($write_pages, $cur_page, $total_page, $url, $add="") {
$str = "";
if ($cur_page < 2) $str .= "<div class=\"jy_paginate center\"><span class=\"pre\">맨앞</span>";
else if ($cur_page > 1) $str .= "<div class=\"jy_paginate center\"><a href='".$url.($start_page)."' class=\"pre\">맨앞</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;
if ($start_page > 1) $str .= "<a href='".$url.($start_page-1)."{$add}' class=\"pre\">이전</a>";
else if ($start_page = 1) $str .= "<span class=\"pre\">이전</span>";
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>$k</strong> ";
}
}
if ($total_page > $end_page) $str .= "<a href='".$url.($end_page+1)."{$add}' class=\"next\">다음</a>";
else $str .= "<span class=\"next\">다음</span>";
if ($cur_page < $total_page) $str .= "<a href='$url".($total_page)."' class=\"next\">맨뒤</a></div>";
else $str .= "<span class=\"next\">맨뒤</span></div>";
$str .= "";
return $str;
}
2. css 추가
../style.css 에 아래 함수 추가/* paging 091123 - 네이버 */
.jy_paginate { padding:10px 0; }
.jy_paginate a,
.jy_paginate strong { position:relative; display:inline-block; margin-right:1px; padding:2px 4px 3px 4px; color:#000; text-decoration:none; border:1px solid #ffffff; font:bold 11px/normal Verdana; _width /**/:17px; }
.jy_paginate strong { color:#f23219 !important; border:1px solid #e9e9e9; }
.jy_paginate .pre { margin-right:6px; padding:4px 6px 2px 14px; _padding-bottom:1px; background:url(http://도메인/img/bg_page_left_off.gif) no-repeat 6px 6px !important; letter-spacing:-1px; }
.jy_paginate .next { margin-left:4px; padding:4px 14px 2px 6px; _padding-bottom:1px; background:url(http://도메인/img/bg_page_right_off.gif) no-repeat 38px 6px !important; letter-spacing:-1px; }
.jy_paginate a.pre { background:url(http://도메인/img/bg_page_left_on.gif) no-repeat 6px 6px !important; }
.jy_paginate a.next { background:url(http://도메인/img/bg_page_right_on.gif) no-repeat 38px 6px !important; }
.jy_paginate .pre,
.jy_paginate .next { display:inline-block; color:#ccc; border:1px solid #e9e9e9; position:relative; top:0; _top:-2px; font:11px/normal 돋움, Dotum; width:30px; _width /**/:50px; }
.jy_paginate a.pre,
.jy_paginate a.next { color:#565656; }
.jy_paginate a:hover { background-color:#f7f7f7 !important; border:1px solid #e9e9e9; }
/* //paging */
3. 이미지(첨부) 업로드
../img 폴더에 업로드4. 기존 페이징 함수를 교체
get_paging() -> get_jy_paginate()
추천
12
12
댓글 16개
후덜 아주 이쁘네요
안녕하세요 ^^
저는 JY님 네이버 페이징으로 도배 되었다는 ㅋ
추천 하고 갑니다 ~
저는 JY님 네이버 페이징으로 도배 되었다는 ㅋ
추천 하고 갑니다 ~
좋은정보감사합니다. ^^
아주좋네요^ㅡ^
get_jy_paginate 함수 자체를.......
get_jy_paginate() 부분을...
get_paging() 이렇게 사용하심 오류나시는분들 잘될꺼에요^ㅡ^
추후에 적용시킬 페이지의 pages css 잡아주심 더 좋구요^ㅡ^
get_jy_paginate 함수 자체를.......
get_jy_paginate() 부분을...
get_paging() 이렇게 사용하심 오류나시는분들 잘될꺼에요^ㅡ^
추후에 적용시킬 페이지의 pages css 잡아주심 더 좋구요^ㅡ^
정보 감사합니다.
기존 페이징 함수를 교체 하라고 하시는데 어느 부분을 말씀하시는지요 문외한이 따라할려다 보니 거기서 막히네요 ㅠㅠ
function get_paging 변경-
function get_paging($write_pages, $cur_page, $total_page, $url, $add="") {
$str = "";
if ($cur_page < 2) $str .= "<div class=\"jy_paginate center\"><span class=\"pre\">맨앞</span>";
else if ($cur_page > 1) $str .= "<div class=\"jy_paginate center\"><a href='".$url.($start_page)."' class=\"pre\">맨앞</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;
if ($start_page > 1) $str .= "<a href='".$url.($start_page-1)."{$add}' class=\"pre\">이전</a>";
else if ($start_page = 1) $str .= "<span class=\"pre\">이전</span>";
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>$k</strong> ";
}
}
if ($total_page > $end_page) $str .= "<a href='".$url.($end_page+1)."{$add}' class=\"next\">다음</a>";
else $str .= "<span class=\"next\">다음</span>";
if ($cur_page < $total_page) $str .= "<a href='$url".($total_page)."' class=\"next\">맨뒤</a></div>";
else $str .= "<span class=\"next\">맨뒤</span></div>";
$str .= "";
return $str;
}
/* paging 091123 - 네이버 */
.jy_paginate { padding:10px 0; }
.jy_paginate a,
.jy_paginate strong { position:relative; display:inline-block; margin-right:1px; padding:2px 4px 3px 4px; color:#000; text-decoration:none; border:1px solid #ffffff; font:bold 11px/normal Verdana; _width /**/:17px; }
.jy_paginate strong { color:#f23219 !important; border:1px solid #e9e9e9; }
.jy_paginate .pre { margin-right:6px; padding:4px 6px 2px 14px; _padding-bottom:1px; background:url(http://도메인/img/bg_page_left_off.gif) no-repeat 6px 6px !important; letter-spacing:-1px; }
.jy_paginate .next { margin-left:4px; padding:4px 14px 2px 6px; _padding-bottom:1px; background:url(http://도메인/img/bg_page_right_off.gif) no-repeat 38px 6px !important; letter-spacing:-1px; }
.jy_paginate a.pre { background:url(http://도메인/img/bg_page_left_on.gif) no-repeat 6px 6px !important; }
.jy_paginate a.next { background:url(http://도메인/img/bg_page_right_on.gif) no-repeat 38px 6px !important; }
.jy_paginate .pre,
.jy_paginate .next { display:inline-block; color:#ccc; border:1px solid #e9e9e9; position:relative; top:0; _top:-2px; font:11px/normal 돋움, Dotum; width:30px; _width /**/:50px; }
.jy_paginate a.pre,
.jy_paginate a.next { color:#565656; }
.jy_paginate a:hover { background-color:#f7f7f7 !important; border:1px solid #e9e9e9; }
/* //paging */
이렇게 적용하세요^ㅡ^
function get_paging($write_pages, $cur_page, $total_page, $url, $add="") {
$str = "";
if ($cur_page < 2) $str .= "<div class=\"jy_paginate center\"><span class=\"pre\">맨앞</span>";
else if ($cur_page > 1) $str .= "<div class=\"jy_paginate center\"><a href='".$url.($start_page)."' class=\"pre\">맨앞</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;
if ($start_page > 1) $str .= "<a href='".$url.($start_page-1)."{$add}' class=\"pre\">이전</a>";
else if ($start_page = 1) $str .= "<span class=\"pre\">이전</span>";
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>$k</strong> ";
}
}
if ($total_page > $end_page) $str .= "<a href='".$url.($end_page+1)."{$add}' class=\"next\">다음</a>";
else $str .= "<span class=\"next\">다음</span>";
if ($cur_page < $total_page) $str .= "<a href='$url".($total_page)."' class=\"next\">맨뒤</a></div>";
else $str .= "<span class=\"next\">맨뒤</span></div>";
$str .= "";
return $str;
}
/* paging 091123 - 네이버 */
.jy_paginate { padding:10px 0; }
.jy_paginate a,
.jy_paginate strong { position:relative; display:inline-block; margin-right:1px; padding:2px 4px 3px 4px; color:#000; text-decoration:none; border:1px solid #ffffff; font:bold 11px/normal Verdana; _width /**/:17px; }
.jy_paginate strong { color:#f23219 !important; border:1px solid #e9e9e9; }
.jy_paginate .pre { margin-right:6px; padding:4px 6px 2px 14px; _padding-bottom:1px; background:url(http://도메인/img/bg_page_left_off.gif) no-repeat 6px 6px !important; letter-spacing:-1px; }
.jy_paginate .next { margin-left:4px; padding:4px 14px 2px 6px; _padding-bottom:1px; background:url(http://도메인/img/bg_page_right_off.gif) no-repeat 38px 6px !important; letter-spacing:-1px; }
.jy_paginate a.pre { background:url(http://도메인/img/bg_page_left_on.gif) no-repeat 6px 6px !important; }
.jy_paginate a.next { background:url(http://도메인/img/bg_page_right_on.gif) no-repeat 38px 6px !important; }
.jy_paginate .pre,
.jy_paginate .next { display:inline-block; color:#ccc; border:1px solid #e9e9e9; position:relative; top:0; _top:-2px; font:11px/normal 돋움, Dotum; width:30px; _width /**/:50px; }
.jy_paginate a.pre,
.jy_paginate a.next { color:#565656; }
.jy_paginate a:hover { background-color:#f7f7f7 !important; border:1px solid #e9e9e9; }
/* //paging */
이렇게 적용하세요^ㅡ^
lib 파일이랑 css 파일을 수정하고 그다음에 어떻게 하는지를 모르겠네요
지드님 말씀대로 그냥 두 파일만 수정하면 되는건지요?
지드님 말씀대로 그냥 두 파일만 수정하면 되는건지요?
저도 달구행님 처럼 막히네요~
4. 기존 페이징 함수를 교체
get_paging() -> get_jy_paginate()
이게 먼지 모르겟네요 ㅠㅠ
4. 기존 페이징 함수를 교체
get_paging() -> get_jy_paginate()
이게 먼지 모르겟네요 ㅠㅠ
페이징
4번은 bbs/list.php 에서 약 133 언저리에서 get_paging() -> get_jy_paginate() 변경하면 됩니다.
유용한 팁이네요 ^^
페이징 네이버 스타일 따라하기
감사합니다.
페이징
완전 이쁘네요 내일 적용 해봐야 겠습니다.