PEAR::Pager で Digg っぽいページャを作る
UI Patterns で紹介されているように Digg のページャは見た目にも綺麗だし、わかりやすいと思います。
以下の画像が Digg のページャです。
そこで、PEAR::Pager を使って Digg っぽいページャを作ってみました。
- スクリーンショット
- デモページ
http://pocari.org/demo/digg-pager/
完全に一緒というわけではありませんが、これくらいならば結構簡単に作ることができました。
ソースは以下のようになります。
<?php
require_once 'Pager/Pager.php';
$params = array(
'mode' => 'sliding',
'perPage' => 10,
'delta' => 5,
'separator' => '',
'curPageLinkClassName' => 'current',
// 上記はこれと同じ意味
// 'curPageSpanPre' => '<span class="current">',
// 'curPageSpanPost' => '</span>',
'prevImg' => '« Previous',
'nextImg' => 'Next »',
'firstPagePre' => '',
'firstPagePost' => '',
'lastPagePre' => '',
'lastPagePost' => '',
'spacesBeforeSeparator' => 0,
'spacesAfterSeparator' => 0,
'totalItems' => 2180,
'altFirst' => 'Go to page 1',
'altPrev' => 'Go to Previous Page',
'altNext' => 'Go to Next Page',
'altLast' => 'Go to Last Page',
'altPage' => 'Go to page',
);
$pager =& Pager::factory($params);
$links = $pager->getLinks();
$page_range = $pager->getPageRangeByPageId();
$page_range = range($page_range[0], $page_range[1]);
$link = '';
if ($links['pages'] != '') {
// 前のページ
if ($links['back'] != '') {
// クラスを付ける
$link .= str_replace('<a href', '<a class="nextprev" href', $links['back']);
} else {
$link .= '<span class="nextprev">' . $pager->getOption('prevImg') . '</span>';
}
// 最初のページ
if ($links['first'] != '' && !in_array(1, $page_range)) {
$link .= $links['first'] . '<span>....</span>';
}
// ページ
$link .= $links['pages'];
// 最後のページ
if ($links['last'] != '' && !in_array($pager->numPages(), $page_range)) {
$link .= '<span>....</span>' . $links['last'];
}
// 次のページ
if ($links['next'] != '') {
// クラスを付ける
$link .= str_replace('<a href', '<a class="nextprev" href', $links['next']);
} else {
$link .= '<span class="nextprev">' . $pager->getOption('nextImg') . '</span>';
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>PEAR::Pager で Digg っぽいページャを作るデモ</title>
</head>
<body>
<div class="pager">
<?php echo $link; ?>
</div>
</body>
</html>
CSS は以下のようになります (Digg のものとほとんど同じです)。
div.pager {
margin-top: 20px;
font-size: 85%;
}
div.pager a,
div.pager span {
display: block;
float: left;
margin-right: 0.1em;
padding: 0.2em 0.5em;
}
div.pager a {
color: #105cb6;
background-color: #fff;
border: 1px solid #9aafe5;
text-decoration: none;
}
div.pager a:hover {
color: #003;
background-color: #fff;
border: 1px solid #2e6ab1;
}
div.pager span.current {
color: #fff;
background-color: #2e6ab1;
border: 1px solid #2e6ab1;
font-weight: bold;
}
div.pager span.nextprev {
border: 1px solid #ddd;
color: #999;
background-color: #fff;
}
div.pager a.nextprev {
font-weight: bold;
}
この記事へのコメント
こういうのずっと探してました。
使わせてもらいます。
ホントにありがとうございます！
名無し | 2008/03/08 (Sat) 11:19:32
http://israel-viagra.wikidot.com
������廨��
��������廨�� ��廨��������
��������廨�� ������������
��������廨�� ����������
��������廨�� ��������
www.israel-viagra.wikidot.com
israel-viagra.wikidot | 2008/07/13 (Sun) 07:44:32
http://israel-viagra.wikidot.com
������廨��
��������廨�� ��廨��������
��������廨�� ������������
��������廨�� ����������
��������廨�� ��������
www.israel-viagra.wikidot.com
israel-viagra.wikidot | 2008/07/13 (Sun) 07:44:45
8leLkE www.boomsa.ru/map.html
# video xxx
# 仗仂��仆仂 亞舒仍亠��亠�� 舒仆舒仍
# ����仗亠�� 仗仂��仆仂 于亳亟亠仂
# ��从舒��舒���� 仗仂��仆仂 仍亠��弍亳�礌仂从
www.goodeg.ru/map.html
# 亟仂仄仂��仂亰�磺从亳 ��舒亰亟亠于舒�ﾑ����� 仗仂��仆仂
# 仗仂��仆仂 ��仂仍亳从亳 从仍亳仗��
# 亟亠于����从亳 仄舒仍����亳从亳 ��仂������ ��仍亠仆
# 仗亠��亳�� ��亳仍��仂仆 仗仂��仆仂 ��仂仍亳从
www.goodeg.ru/map.html
www.titkiboo.ru/map.html
��从舒��舒���� 仗仂��仆仂 于亳亟亠仂 ��仂仍亳从亳 | 2008/07/20 (Sun) 19:47:08
YrdnxE # 仗仂��仆仂 ��仂仍亳从亳 ��仄�� ��仄仂����亠����
# 仗仂��仆仂 ��仄�� 仂仗仍舒��舒
# 于亳亟亠仂 仗仂��仆仂 亰舒 ��仄��
http://seks.hochu-drochu.ru/map.html
http://porno.cykalubov.ru/map.html
http://porno.titkiboo.ru/map.html
http://porno.devki-davalki.ru/map.html
http://seks.devki-davalki.ru/map.html
http://devki.porno-huk.ru/map.html
http://devki.porno-hook.ru/map.html
http://porno.trahnutaya.ru/map.html
http://seks.trahnutaya.ru/map.html
# 仗仂��仆仂 ��仂仍亳从 ��仄��
# 仗仂��仆仂 仂��仗��舒于�� ��仄��
# 仗仂��仆仂��亳仍��仄 ��从舒��舒���� ��仄��
# ��从舒��舒���� ��������从仂亠 仗仂��仆仂 亰舒 ��仄��
# ��从舒��舒���� 亞亠亶 于亳亟亠仂 sms
# ��从舒��舒���� 仗仂��仆仂 亰舒 1 ��仄��
http://porno.titkiboo.ru/map.html | 2008/08/03 (Sun) 04:53:51