페이징 css 팁
간단한 팁입니다.
첨부한 이미지처럼 페이징을 만드는 팁입니다.
우선 아래 css를 사용하고 있는 스타일시트 문서에 넣습니다.
#paging-box { text-align:center;background:#fff; }
#paging-box ul { list-style-image:none;list-style-type:none; padding:0;margin:0; }
#paging-box li { float:left; padding:1px 3px;margin:0 2px;font-size:1.0em;background:#69c;border:solid #369 1px; }
#paging-box li:hover { background:#9cf; }
#paging-box li a { display:block;color:#fff; }
적절히 손BoA서 더 멋있게 꾸미셔도 됩니다.
그리고 lib/common.lib.php의 페이징 관련 소스를 아래처럼 수정합니다.
별거 없고 html 부분에 위의 css를 적용하기만 되는거죠.
////// 현재페이지, 총페이지수, 한페이지에 보여줄 행, URL
function get_paging($write_pages, $cur_page, $total_page, $url, $add="")
{
$str = "";
$str = "<div id='paging-box'><ul>";
if ($cur_page > 1) {
$str .= "<li><a href='" . $url . "1{$add}'>처음</a></li>";
//$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;
if ($start_page > 1) $str .= "<li><a href='" . $url . ($start_page-1) . "{$add}'>이전</a></li>";
if ($total_page > 1) {
for ($k=$start_page;$k<=$end_page;$k++) {
if ($cur_page != $k)
$str .= " <li><a href='$url$k{$add}'><span>$k</span></a></li>";
else
$str .= " <li><b>$k</b></li> ";
}
}
if ($total_page > $end_page) $str .= " <li><a href='" . $url . ($end_page+1) . "{$add}'>다음</a></li>";
if ($cur_page < $total_page) {
//$str .= "[<a href='$url" . ($cur_page+1) . "'>다음</a>]";
$str .= " <li><a href='$url$total_page{$add}'>맨끝</a></li>";
}
$str .= "</ul></div>";
$str .= "";
return $str;
}
//////////////여기까지
너무 허접한 팁이지만 초보분들을 위해서....;;
* 질문입니다. 저 페이징을 중앙정렬하려면 어떻게 해야 할까요?
첨부한 이미지처럼 페이징을 만드는 팁입니다.
우선 아래 css를 사용하고 있는 스타일시트 문서에 넣습니다.
#paging-box { text-align:center;background:#fff; }
#paging-box ul { list-style-image:none;list-style-type:none; padding:0;margin:0; }
#paging-box li { float:left; padding:1px 3px;margin:0 2px;font-size:1.0em;background:#69c;border:solid #369 1px; }
#paging-box li:hover { background:#9cf; }
#paging-box li a { display:block;color:#fff; }
적절히 손BoA서 더 멋있게 꾸미셔도 됩니다.
그리고 lib/common.lib.php의 페이징 관련 소스를 아래처럼 수정합니다.
별거 없고 html 부분에 위의 css를 적용하기만 되는거죠.
////// 현재페이지, 총페이지수, 한페이지에 보여줄 행, URL
function get_paging($write_pages, $cur_page, $total_page, $url, $add="")
{
$str = "";
$str = "<div id='paging-box'><ul>";
if ($cur_page > 1) {
$str .= "<li><a href='" . $url . "1{$add}'>처음</a></li>";
//$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;
if ($start_page > 1) $str .= "<li><a href='" . $url . ($start_page-1) . "{$add}'>이전</a></li>";
if ($total_page > 1) {
for ($k=$start_page;$k<=$end_page;$k++) {
if ($cur_page != $k)
$str .= " <li><a href='$url$k{$add}'><span>$k</span></a></li>";
else
$str .= " <li><b>$k</b></li> ";
}
}
if ($total_page > $end_page) $str .= " <li><a href='" . $url . ($end_page+1) . "{$add}'>다음</a></li>";
if ($cur_page < $total_page) {
//$str .= "[<a href='$url" . ($cur_page+1) . "'>다음</a>]";
$str .= " <li><a href='$url$total_page{$add}'>맨끝</a></li>";
}
$str .= "</ul></div>";
$str .= "";
return $str;
}
//////////////여기까지
너무 허접한 팁이지만 초보분들을 위해서....;;
* 질문입니다. 저 페이징을 중앙정렬하려면 어떻게 해야 할까요?
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 7개
css 에서
# [아이디] {
margin:0 auto;
}
하면 될듯합니다만~
어떻게 영역잡으셨느지에 따라 달라질듯하네요~