93 lines
4.8 KiB
HTML
93 lines
4.8 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
<html>
|
||
|
|
</html>
|
||
|
|
<head>
|
||
|
|
<title>Samples of pagination styling for will_paginate</title>
|
||
|
|
<link href='pagination.css' rel='stylesheet' type='text/css' />
|
||
|
|
<style type='text/css'>
|
||
|
|
html {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
background: #999;
|
||
|
|
font: normal 76% "Lucida Grande", Verdana, Helvetica, sans-serif; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 2em;
|
||
|
|
padding: 2em;
|
||
|
|
border: 2px solid gray;
|
||
|
|
background: white;
|
||
|
|
color: #222; }
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 2em;
|
||
|
|
font-weight: normal;
|
||
|
|
margin: 0 0 1em 0; }
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: 1.4em;
|
||
|
|
margin: 1em 0 .5em 0; }
|
||
|
|
|
||
|
|
pre {
|
||
|
|
font-size: 13px;
|
||
|
|
font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Samples of pagination styling for will_paginate</h1>
|
||
|
|
<p>
|
||
|
|
Find these styles in <b>"examples/pagination.css"</b> of <i>will_paginate</i> library.
|
||
|
|
There is a Sass version of it for all you sassy people.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Read about good rules for pagination:
|
||
|
|
<a href='http://kurafire.net/log/archive/2007/06/22/pagination-101'>Pagination 101</a>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<em>Warning:</em>
|
||
|
|
page links below don't lead anywhere (so don't click on them).
|
||
|
|
</p>
|
||
|
|
<h2>
|
||
|
|
Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span>
|
||
|
|
</h2>
|
||
|
|
<div>
|
||
|
|
<span class="disabled prev_page">« Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a>
|
||
|
|
</div>
|
||
|
|
<h2>Digg.com</h2>
|
||
|
|
<div class='digg_pagination'>
|
||
|
|
<span class="disabled prev_page">« Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a>
|
||
|
|
</div>
|
||
|
|
<h2>Digg-style, no page links</h2>
|
||
|
|
<div class='digg_pagination'>
|
||
|
|
<span class="disabled prev_page">« Previous</span> <a href="./?page=2" rel="next" class="next_page">Next »</a>
|
||
|
|
</div>
|
||
|
|
<p>Code that renders this:</p>
|
||
|
|
<pre>
|
||
|
|
<code><%= will_paginate @posts, :page_links => false %></code>
|
||
|
|
</pre>
|
||
|
|
<h2>Digg-style, extra content</h2>
|
||
|
|
<div class='digg_pagination'>
|
||
|
|
<div class='page_info'>
|
||
|
|
Displaying entries <b>1 - 6</b> of <b>180</b> in total
|
||
|
|
</div>
|
||
|
|
<span class="disabled prev_page">« Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a>
|
||
|
|
</div>
|
||
|
|
<p>Code that renders this:</p>
|
||
|
|
<pre>
|
||
|
|
<code><div class="digg_pagination">
|
||
|
|
<div clas="page_info">
|
||
|
|
<%= page_entries_info @posts %>
|
||
|
|
</div>
|
||
|
|
<%= will_paginate @posts, :container => false %>
|
||
|
|
</div></code>
|
||
|
|
</pre>
|
||
|
|
<h2>Apple.com store</h2>
|
||
|
|
<div class='apple_pagination'>
|
||
|
|
<span class="disabled prev_page">« Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a>
|
||
|
|
</div>
|
||
|
|
<h2>Flickr.com</h2>
|
||
|
|
<div class='flickr_pagination'>
|
||
|
|
<span class="disabled prev_page">« Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a>
|
||
|
|
<div class='page_info'>(118 photos)</div>
|
||
|
|
</div>
|
||
|
|
</body>
|