Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 93 lines (88 sloc) 4.866 kB
4d7de72 @mislav add examples of pagination links styling
authored
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html>
3 </html>
4 <head>
5 <title>Samples of pagination styling for will_paginate</title>
6 <link href='pagination.css' rel='stylesheet' type='text/css' />
7 <style type='text/css'>
8 html {
9 margin: 0;
10 padding: 0;
11 background: #999;
12 font: normal 76% "Lucida Grande", Verdana, Helvetica, sans-serif; }
13
14 body {
15 margin: 2em;
16 padding: 2em;
17 border: 2px solid gray;
18 background: white;
19 color: #222; }
20
21 h1 {
22 font-size: 2em;
23 font-weight: normal;
24 margin: 0 0 1em 0; }
25
26 h2 {
27 font-size: 1.4em;
28 margin: 1em 0 .5em 0; }
29
30 pre {
31 font-size: 13px;
32 font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace; }
33 </style>
34 </head>
35 <body>
36 <h1>Samples of pagination styling for will_paginate</h1>
37 <p>
38 Find these styles in <b>"examples/pagination.css"</b> of <i>will_paginate</i> library.
39 There is a Sass version of it for all you sassy people.
40 </p>
41 <p>
42 Read about good rules for pagination:
43 <a href='http://kurafire.net/log/archive/2007/06/22/pagination-101'>Pagination 101</a>
44 </p>
45 <p>
46 <em>Warning:</em>
47 page links below don't lead anywhere (so don't click on them).
48 </p>
49 <h2>
50 Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span>
51 </h2>
52 <div>
3bda0ba @mislav added prev_page/next_page CSS classes on prev/next "buttons" in views
authored
53 <span class="disabled prev_page">&laquo; 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">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
4d7de72 @mislav add examples of pagination links styling
authored
54 </div>
55 <h2>Digg.com</h2>
3bda0ba @mislav added prev_page/next_page CSS classes on prev/next "buttons" in views
authored
56 <div class='digg_pagination'>
57 <span class="disabled prev_page">&laquo; 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">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
4d7de72 @mislav add examples of pagination links styling
authored
58 </div>
59 <h2>Digg-style, no page links</h2>
3bda0ba @mislav added prev_page/next_page CSS classes on prev/next "buttons" in views
authored
60 <div class='digg_pagination'>
61 <span class="disabled prev_page">&laquo; Previous</span> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
4d7de72 @mislav add examples of pagination links styling
authored
62 </div>
63 <p>Code that renders this:</p>
64 <pre>
65 <code>&lt;%= will_paginate @posts, :page_links =&gt; false %&gt;</code>
66 </pre>
67 <h2>Digg-style, extra content</h2>
3bda0ba @mislav added prev_page/next_page CSS classes on prev/next "buttons" in views
authored
68 <div class='digg_pagination'>
69 <div class='page_info'>
4d7de72 @mislav add examples of pagination links styling
authored
70 Displaying entries <b>1&nbsp;-&nbsp;6</b> of <b>180</b> in total
71 </div>
3bda0ba @mislav added prev_page/next_page CSS classes on prev/next "buttons" in views
authored
72 <span class="disabled prev_page">&laquo; 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">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
4d7de72 @mislav add examples of pagination links styling
authored
73 </div>
74 <p>Code that renders this:</p>
75 <pre>
3bda0ba @mislav added prev_page/next_page CSS classes on prev/next "buttons" in views
authored
76 <code>&lt;div class="digg_pagination"&gt;
77 &lt;div clas="page_info"&gt;
4d7de72 @mislav add examples of pagination links styling
authored
78 &lt;%= page_entries_info @posts %&gt;
79 &lt;/div&gt;
80 &lt;%= will_paginate @posts, :container =&gt; false %&gt;
81 &lt;/div&gt;</code>
82 </pre>
83 <h2>Apple.com store</h2>
3bda0ba @mislav added prev_page/next_page CSS classes on prev/next "buttons" in views
authored
84 <div class='apple_pagination'>
85 <span class="disabled prev_page">&laquo; 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">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
4d7de72 @mislav add examples of pagination links styling
authored
86 </div>
87 <h2>Flickr.com</h2>
3bda0ba @mislav added prev_page/next_page CSS classes on prev/next "buttons" in views
authored
88 <div class='flickr_pagination'>
89 <span class="disabled prev_page">&laquo; 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">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
90 <div class='page_info'>(118 photos)</div>
4d7de72 @mislav add examples of pagination links styling
authored
91 </div>
92 </body>
Something went wrong with that request. Please try again.