태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

페이징 네이버 스타일 따라하기

12년 전

그누보드 기준

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 에 아래 함수 추가

.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; }

3. 이미지(첨부) 업로드
../img 폴더에 업로드

첨부 :

img.zip (1.8 KB) (3) 파일 2

2009718857_wJLhMlje_jy_paging.gif (1.6 KB) (5)

추천 목록

번호	제목
275	자바스크립트 XHTML DTD STRICT 유효성에 통과하기
274	크로스브라우징 input 박스
273	IE6,IE7 ,FireFox 에 대해 CSS 맞추기
272	IE 조건부 주석의 적절한 사용법
271	웹표준 준수사항 22가지
270	internet Explorer8 에서 기존 사이트를 정상적으로 나오게 하는 메타태그
269	각 HTML버전별 DTD(Document Type Definition)
268	XHTML1.1 에서 일반적으로 범하기 쉬운 오류
267	웹표준에서 더이상 사용할수 없는 태그&속성
266	웹표준 모든 애트리뷰트에는 값이 필요
265	웹표준으로 퍼블리싱할때 꼭 지켜야 할 사항들
264	평 => m2
263	평수 구하기 (가로 x 세로)
262	제이쿼리 탭메뉴
261	HTML5 elements
260	[MySQL]UNION과 UNION ALL 의 차이 및 주의 사항
259	[MySQL] Union 사용법. 여러 테이블의 같은 값을 한번 쿼리로 추출하기
258	ie6 css 롤링 이미지 깜빡임 문제 해결법
257	div 마지막 내용 복제/반복 현상(Duplicate Characters Bug)
256	셀렉트박스를 div+css 로 변경하기
255	파일첨부를 div+css 로 변경하기
	페이징 네이버 스타일 따라하기
253	마우스오버 롤링이미지를 jQuery로 변경하기
252	css background sprites
251	Jquery 모음
250	배경이미지 제어하기(고정하기)
249	글자 줄바꿈과 줄바꿈 금지
248	텍스트 overflow
247	border-style속성의 값
246	Input 박스에 포커스 되었을때 스타일 변경