diff options
| author | hukl <contact@smyck.org> | 2009-02-17 12:47:49 +0100 |
|---|---|---|
| committer | hukl <contact@smyck.org> | 2009-02-17 12:47:49 +0100 |
| commit | 3cdcb5ca02a94b2b342c30903a27d47d35d46e55 (patch) | |
| tree | ef3e1154fe262561b3955c07edcaee3824a21f47 /vendor/plugins/will_paginate/examples/index.html | |
| parent | 7a282f2605f6fb3689940e5c7072b4801653deb2 (diff) | |
added will_paginate plugin
Diffstat (limited to 'vendor/plugins/will_paginate/examples/index.html')
| -rw-r--r-- | vendor/plugins/will_paginate/examples/index.html | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/vendor/plugins/will_paginate/examples/index.html b/vendor/plugins/will_paginate/examples/index.html new file mode 100644 index 0000000..858f7c6 --- /dev/null +++ b/vendor/plugins/will_paginate/examples/index.html | |||
| @@ -0,0 +1,92 @@ | |||
| 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> | ||
| 53 | <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> | ||
| 54 | </div> | ||
| 55 | <h2>Digg.com</h2> | ||
| 56 | <div class='digg_pagination'> | ||
| 57 | <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> | ||
| 58 | </div> | ||
| 59 | <h2>Digg-style, no page links</h2> | ||
| 60 | <div class='digg_pagination'> | ||
| 61 | <span class="disabled prev_page">« Previous</span> <a href="./?page=2" rel="next" class="next_page">Next »</a> | ||
| 62 | </div> | ||
| 63 | <p>Code that renders this:</p> | ||
| 64 | <pre> | ||
| 65 | <code><%= will_paginate @posts, :page_links => false %></code> | ||
| 66 | </pre> | ||
| 67 | <h2>Digg-style, extra content</h2> | ||
| 68 | <div class='digg_pagination'> | ||
| 69 | <div class='page_info'> | ||
| 70 | Displaying entries <b>1 - 6</b> of <b>180</b> in total | ||
| 71 | </div> | ||
| 72 | <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> | ||
| 73 | </div> | ||
| 74 | <p>Code that renders this:</p> | ||
| 75 | <pre> | ||
| 76 | <code><div class="digg_pagination"> | ||
| 77 | <div clas="page_info"> | ||
| 78 | <%= page_entries_info @posts %> | ||
| 79 | </div> | ||
| 80 | <%= will_paginate @posts, :container => false %> | ||
| 81 | </div></code> | ||
| 82 | </pre> | ||
| 83 | <h2>Apple.com store</h2> | ||
| 84 | <div class='apple_pagination'> | ||
| 85 | <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> | ||
| 86 | </div> | ||
| 87 | <h2>Flickr.com</h2> | ||
| 88 | <div class='flickr_pagination'> | ||
| 89 | <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> | ||
| 90 | <div class='page_info'>(118 photos)</div> | ||
| 91 | </div> | ||
| 92 | </body> | ||
