페이지 표시 모양변형

get_paging.gif
bugs_button.gif
페이지 표시 모양이 심심한듯하여 요즘 많이 쓰는듯한 모양으로 변형함과 동시에 마우스 올리면 설명이 나타나는 기능을 추가(?) 하였습니다. (첫번째 그림)
그림 사용을 배제하고 스타일 만으로 이미지를 사용한듯한 느낌을 나타내었습니다.

:: 수정방법 ::
lib/common.lib.php 에서 get_paging 함수를 아래의 내용으로 바꿉니다.
------------------------------------절취선-----------------------------------
// 현재페이지, 총페이지수, 한페이지에 보여줄 행, URL
# 3.10 수정 $n 인수는 사용하지 않으므로 삭제
# 강조색 추천: #FF4D00 (주황)
#function get_paging($write_pages, $cur_page, $total_page, $n, $url)
function get_paging($write_pages, $cur_page, $total_page, $url)
{
global $cfg;

$strs = array();

if ($cur_page > 1)
{
$strs[] = "<a href='" . $url . "1' title='최초 페이지로 이동' style='font-size:7pt;color:gray;letter-spacing: -3px;'>■◀</a>";
$strs[] = "<a href='" . $url . ($cur_page-1) . "' title='".($cur_page-1)." 페이지로 이동' style='font-size:7pt;color:gray;'>◀</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)
$strs[] = "<a href='" . $url . ($start_page-1) . "' title='". ($start_page-1) . " 페이지로 이동' style='font-size:7pt;color:gray;letter-spacing: -4px;'>◀◀</a>";

if ($total_page > 1) {
for ($k=$start_page;$k<=$end_page;$k++) {
if ($cur_page != $k)
$strs[] = "<a href='$url$k' title='$k 페이지로 이동'>$k</a>";
else
$strs[] = " <b style='color:gray;' title='현재 페이지 : $k'>$k</b> ";
}
}

if ($total_page > $end_page)
$strs[] = "<a href='" . $url . ($end_page+1) . "' title='". ($end_page+1) . " 페이지로 이동' style='font-size:7pt;color:gray;letter-spacing: -4px;'>▶▶</a>";

if ($cur_page < $total_page)
{
$strs[] = "<a href='$url" . ($cur_page+1) . "' title='" . ($cur_page+1) . " 페이지로 이동' style='font-size:7pt;color:gray;'>▶</a>";
$strs[] = "<a href='$url$total_page' title='$total_page 페이지로 이동' style='font-size:7pt;color:gray;letter-spacing: -3px;'>▶■</a>";
}

$str = implode("<font color=#b5b2b5> | </font>", $strs);
return $str;
}

------------------------------------절취선-----------------------------------

주석 달아놓은 추천 강조색으로 색을 바꾸시면 이쁘게 나옵니다.
바꾸시는 방법은 편집기에서 찾기&바꾸기 : gray > #FF4D00 하시면 됩니다.

:: 뽀너스 ::
스타일로 '벅스' 버튼 만들기 (두번째 그림)

<style>
button {
color: #424542;
background-color:white;
border-top-width:1pt;
border-right-width:1pt;
border-bottom-width:1pt;
border-left-width:5pt;
border-top-color:rgb(189,182,189);
border-right-color:rgb(189,182,189);
border-bottom-color:rgb(189,182,189);
border-left-color:rgb(255,166,24);
border-style:solid;
font-weight:bold;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#EFEBEF', Direction=135, Strength=5);
padding-left:5px;
padding-right:5px;
padding-top:3px;
}
</style>

<button onfocus="this.blur();"> O K </button>

단점은 다른것과 한줄에 있으면 높이가 다르게 나타난다는것입니다.

첨부파일

get_paging.gif (2.1 KB)
13회 2004-03-26 17:19
bugs_button.gif (2.1 KB)
8회 2004-03-26 17:23
|

댓글 2개

댓글을 작성하시려면 로그인이 필요합니다. 로그인

그누3 팁자료실

+
제목 글쓴이 날짜 조회
21년 전 조회 2,385
21년 전 조회 2,942
21년 전 조회 1,859
21년 전 조회 1,635
21년 전 조회 2,010
21년 전 조회 3,537
21년 전 조회 2,312
21년 전 조회 1,995
21년 전 조회 2,103
21년 전 조회 2,390
21년 전 조회 2,369
21년 전 조회 2,346
21년 전 조회 1,956
21년 전 조회 1,987
21년 전 조회 2,056
21년 전 조회 3,438
21년 전 조회 2,050
21년 전 조회 3,132
21년 전 조회 2,559
21년 전 조회 2,139
🐛 버그신고