Show More
Commit Description:
also shows users in all (without pagination)
Commit Description:
also shows users in all (without pagination)
References:
File last commit:
Show/Diff file:
Action:
Last Author
Show All-
Jittat Fakcharoenphol-
vendor/plugins/will_paginate/examples/index.html
| 92 lines
| 4.8 KiB
| text/html
| HtmlLexer
|
Jittat Fakcharoenphol
|
r299 | <!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> | ||||