public
Fork of mislav/will_paginate
Description: Most awesome pagination solution for Rails
Homepage: http://github.com/mislav/will_paginate/wikis
Clone URL: git://github.com/technoweenie/will_paginate.git
Search Repo:
add examples of pagination links styling
mislav (author)
Sun Apr 06 16:40:44 -0700 2008
commit  4d7de72f8df3b75069973b755231660b07783524
tree    a853ec34634ee104a1fdcf1f9b6a163b1558d753
parent  8fe31cbe2c2c0c488cc7950c4b1ef498fcdc947e
0
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0
@@ -1,182 +1 @@
0
-= WillPaginate
0
-
0
-Pagination is just limiting the number of records displayed. Why should you let
0
-it get in your way while developing, then? This plugin makes magic happen. Did
0
-you ever want to be able to do just this on a model:
0
-
0
- Post.paginate :page => 1, :order => 'created_at DESC'
0
-
0
-... and then render the page links with a single view helper? Well, now you
0
-can.
0
-
0
-Ryan Bates made an awesome screencast[http://railscasts.com/episodes/51],
0
-check it out.
0
-
0
-Your mind reels with questions? Join our Google
0
-group[http://groups.google.com/group/will_paginate].
0
-
0
-== Installation
0
-
0
-Will Paginate officially supports Rails versions 1.2.6 and 2.0.x.
0
-
0
-Previously, the plugin was available on the following SVN location:
0
-
0
- svn://errtheblog.com/svn/plugins/will_paginate
0
-
0
-In February 2008, it moved to GitHub[http://github.com/mislav/will_paginate/tree]
0
-to be tracked with git. The SVN repo continued to have updates, but not
0
-forever. Therefore you should switch to using the gem:
0
-
0
- gem install will_paginate
0
-
0
-After that, you can remove the plugin from your applications and add
0
-a simple require to the end of config/environment.rb:
0
-
0
- require 'will_paginate'
0
-
0
-That's it, just remember to install the gem on all machines that
0
-you are deploying to.
0
-
0
-The second option is to download and extract the tarball from GitHub. Here is the
0
-link for downloading the current state of the master branch:
0
-http://github.com/mislav/will_paginate/tarball/master
0
-
0
-Extract it to <tt>vendor/plugins</tt>. The directory will have a default name
0
-like "mislav-will_paginate-master"; you can rename it to "will_paginate" for
0
-simplicity.
0
-
0
-== Example usage
0
-
0
-Use a paginate finder in the controller:
0
-
0
- @posts = Post.paginate_by_board_id @board.id, :page => params[:page], :order => 'updated_at DESC'
0
-
0
-Yeah, +paginate+ works just like +find+ -- it just doesn't fetch all the
0
-records. Don't forget to tell it which page you want, or it will complain!
0
-Read more on WillPaginate::Finder::ClassMethods.
0
-
0
-Render the posts in your view like you would normally do. When you need to render
0
-pagination, just stick this in:
0
-
0
- <%= will_paginate @posts %>
0
-
0
-You're done. (Copy and paste the example fancy CSS styles from the bottom.) You
0
-can find the option list at WillPaginate::ViewHelpers.
0
-
0
-How does it know how much items to fetch per page? It asks your model by calling
0
-its <tt>per_page</tt> class method. You can define it like this:
0
-
0
- class Post < ActiveRecord::Base
0
- cattr_reader :per_page
0
- @@per_page = 50
0
- end
0
-
0
-... or like this:
0
-
0
- class Post < ActiveRecord::Base
0
- def self.per_page
0
- 50
0
- end
0
- end
0
-
0
-... or don't worry about it at all. WillPaginate defines it to be <b>30</b> by default.
0
-But you can always specify the count explicitly when calling +paginate+:
0
-
0
- @posts = Post.paginate :page => params[:page], :per_page => 50
0
-
0
-The +paginate+ finder wraps the original finder and returns your resultset that now has
0
-some new properties. You can use the collection as you would with any ActiveRecord
0
-resultset. WillPaginate view helpers also need that object to be able to render pagination:
0
-
0
- <ol>
0
- <% for post in @posts -%>
0
- <li>Render `post` in some nice way.</li>
0
- <% end -%>
0
- </ol>
0
-
0
- <p>Now let's render us some pagination!</p>
0
- <%= will_paginate @posts %>
0
-
0
-More detailed documentation:
0
-
0
-* WillPaginate::Finder::ClassMethods for pagination on your models;
0
-* WillPaginate::ViewHelpers for your views.
0
-
0
-== Oh noes, a bug!
0
-
0
-Tell us what happened so we can fix it, quick! Issues are filed on the Lighthouse project:
0
-http://err.lighthouseapp.com/projects/466-plugins/tickets?q=tagged:will_paginate
0
-
0
-Steps to make an awesome bug report:
0
-
0
-1. Run <tt>rake test</tt> in the <i>will_paginate</i> directory. (You will need SQLite3.)
0
- Copy the output if there are failing tests.
0
-2. Register on Lighthouse to create a new ticket.
0
-3. Write a descriptive, short title. Provide as much info as you can in the body.
0
- Assign the ticket to Mislav and tag it with meaningful tags, <tt>"will_paginate"</tt>
0
- being among them.
0
-4. Yay! You will be notified on updates automatically.
0
-
0
-Here is an example of a great bug report and patch:
0
-http://err.lighthouseapp.com/projects/466/tickets/172-total_entries-ignored-in-paginate_by_sql
0
-
0
-== Authors, credits, contact
0
-
0
-Want to discuss, request features, ask questions? Join the Google group:
0
-http://groups.google.com/group/will_paginate
0
-
0
-Authors:: Mislav Marohnić, PJ Hyett
0
-Original announcement:: http://errtheblog.com/post/929
0
-Original PHP source:: http://www.strangerstudios.com/sandbox/pagination/diggstyle.php
0
-
0
-All these people helped making will_paginate what it is now with their code
0
-contributions or just simply awesome ideas:
0
-
0
-Chris Wanstrath, Dr. Nic Williams, K. Adam Christensen, Mike Garey, Bence
0
-Golda, Matt Aimonetti, Charles Brian Quinn, Desi McAdam, James Coglan, Matijs
0
-van Zuijlen, Maria, Brendan Ribera, Todd Willey, Bryan Helmkamp, Jan Berkel,
0
-Lourens Naudé.
0
-
0
-== Usable pagination in the UI
0
-
0
-Copy the following CSS into your stylesheet for a good start:
0
-
0
- .pagination {
0
- padding: 3px;
0
- margin: 3px;
0
- }
0
- .pagination a {
0
- padding: 2px 5px 2px 5px;
0
- margin: 2px;
0
- border: 1px solid #aaaadd;
0
- text-decoration: none;
0
- color: #000099;
0
- }
0
- .pagination a:hover, .pagination a:active {
0
- border: 1px solid #000099;
0
- color: #000;
0
- }
0
- .pagination span.current {
0
- padding: 2px 5px 2px 5px;
0
- margin: 2px;
0
- border: 1px solid #000099;
0
- font-weight: bold;
0
- background-color: #000099;
0
- color: #FFF;
0
- }
0
- .pagination span.disabled {
0
- padding: 2px 5px 2px 5px;
0
- margin: 2px;
0
- border: 1px solid #eee;
0
- color: #ddd;
0
- }
0
-
0
-More reading about pagination as design pattern:
0
-
0
-* Pagination 101:
0
- http://kurafire.net/log/archive/2007/06/22/pagination-101
0
-* Pagination gallery:
0
- http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
0
-* Pagination on Yahoo Design Pattern Library:
0
- http://developer.yahoo.com/ypatterns/parent.php?pattern=pagination
...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
0
@@ -1 +1,182 @@
0
+= WillPaginate
0
+
0
+Pagination is just limiting the number of records displayed. Why should you let
0
+it get in your way while developing, then? This plugin makes magic happen. Did
0
+you ever want to be able to do just this on a model:
0
+
0
+ Post.paginate :page => 1, :order => 'created_at DESC'
0
+
0
+... and then render the page links with a single view helper? Well, now you
0
+can.
0
+
0
+Ryan Bates made an awesome screencast[http://railscasts.com/episodes/51],
0
+check it out.
0
+
0
+Your mind reels with questions? Join our Google
0
+group[http://groups.google.com/group/will_paginate].
0
+
0
+== Installation
0
+
0
+Will Paginate officially supports Rails versions 1.2.6 and 2.0.x.
0
+
0
+Previously, the plugin was available on the following SVN location:
0
+
0
+ svn://errtheblog.com/svn/plugins/will_paginate
0
+
0
+In February 2008, it moved to GitHub[http://github.com/mislav/will_paginate/tree]
0
+to be tracked with git. The SVN repo continued to have updates, but not
0
+forever. Therefore you should switch to using the gem:
0
+
0
+ gem install will_paginate
0
+
0
+After that, you can remove the plugin from your applications and add
0
+a simple require to the end of config/environment.rb:
0
+
0
+ require 'will_paginate'
0
+
0
+That's it, just remember to install the gem on all machines that
0
+you are deploying to.
0
+
0
+The second option is to download and extract the tarball from GitHub. Here is the
0
+link for downloading the current state of the master branch:
0
+http://github.com/mislav/will_paginate/tarball/master
0
+
0
+Extract it to <tt>vendor/plugins</tt>. The directory will have a default name
0
+like "mislav-will_paginate-master"; you can rename it to "will_paginate" for
0
+simplicity.
0
+
0
+== Example usage
0
+
0
+Use a paginate finder in the controller:
0
+
0
+ @posts = Post.paginate_by_board_id @board.id, :page => params[:page], :order => 'updated_at DESC'
0
+
0
+Yeah, +paginate+ works just like +find+ -- it just doesn't fetch all the
0
+records. Don't forget to tell it which page you want, or it will complain!
0
+Read more on WillPaginate::Finder::ClassMethods.
0
+
0
+Render the posts in your view like you would normally do. When you need to render
0
+pagination, just stick this in:
0
+
0
+ <%= will_paginate @posts %>
0
+
0
+You're done. (Copy and paste the example fancy CSS styles from the bottom.) You
0
+can find the option list at WillPaginate::ViewHelpers.
0
+
0
+How does it know how much items to fetch per page? It asks your model by calling
0
+its <tt>per_page</tt> class method. You can define it like this:
0
+
0
+ class Post < ActiveRecord::Base
0
+ cattr_reader :per_page
0
+ @@per_page = 50
0
+ end
0
+
0
+... or like this:
0
+
0
+ class Post < ActiveRecord::Base
0
+ def self.per_page
0
+ 50
0
+ end
0
+ end
0
+
0
+... or don't worry about it at all. WillPaginate defines it to be <b>30</b> by default.
0
+But you can always specify the count explicitly when calling +paginate+:
0
+
0
+ @posts = Post.paginate :page => params[:page], :per_page => 50
0
+
0
+The +paginate+ finder wraps the original finder and returns your resultset that now has
0
+some new properties. You can use the collection as you would with any ActiveRecord
0
+resultset. WillPaginate view helpers also need that object to be able to render pagination:
0
+
0
+ <ol>
0
+ <% for post in @posts -%>
0
+ <li>Render `post` in some nice way.</li>
0
+ <% end -%>
0
+ </ol>
0
+
0
+ <p>Now let's render us some pagination!</p>
0
+ <%= will_paginate @posts %>
0
+
0
+More detailed documentation:
0
+
0
+* WillPaginate::Finder::ClassMethods for pagination on your models;
0
+* WillPaginate::ViewHelpers for your views.
0
+
0
+== Oh noes, a bug!
0
+
0
+Tell us what happened so we can fix it, quick! Issues are filed on the Lighthouse project:
0
+http://err.lighthouseapp.com/projects/466-plugins/tickets?q=tagged:will_paginate
0
+
0
+Steps to make an awesome bug report:
0
+
0
+1. Run <tt>rake test</tt> in the <i>will_paginate</i> directory. (You will need SQLite3.)
0
+ Copy the output if there are failing tests.
0
+2. Register on Lighthouse to create a new ticket.
0
+3. Write a descriptive, short title. Provide as much info as you can in the body.
0
+ Assign the ticket to Mislav and tag it with meaningful tags, <tt>"will_paginate"</tt>
0
+ being among them.
0
+4. Yay! You will be notified on updates automatically.
0
+
0
+Here is an example of a great bug report and patch:
0
+http://err.lighthouseapp.com/projects/466/tickets/172-total_entries-ignored-in-paginate_by_sql
0
+
0
+== Authors, credits, contact
0
+
0
+Want to discuss, request features, ask questions? Join the Google group:
0
+http://groups.google.com/group/will_paginate
0
+
0
+Authors:: Mislav Marohnić, PJ Hyett
0
+Original announcement:: http://errtheblog.com/post/929
0
+Original PHP source:: http://www.strangerstudios.com/sandbox/pagination/diggstyle.php
0
+
0
+All these people helped making will_paginate what it is now with their code
0
+contributions or just simply awesome ideas:
0
+
0
+Chris Wanstrath, Dr. Nic Williams, K. Adam Christensen, Mike Garey, Bence
0
+Golda, Matt Aimonetti, Charles Brian Quinn, Desi McAdam, James Coglan, Matijs
0
+van Zuijlen, Maria, Brendan Ribera, Todd Willey, Bryan Helmkamp, Jan Berkel,
0
+Lourens Naudé.
0
+
0
+== Usable pagination in the UI
0
+
0
+Copy the following CSS into your stylesheet for a good start:
0
+
0
+ .pagination {
0
+ padding: 3px;
0
+ margin: 3px;
0
+ }
0
+ .pagination a {
0
+ padding: 2px 5px 2px 5px;
0
+ margin: 2px;
0
+ border: 1px solid #aaaadd;
0
+ text-decoration: none;
0
+ color: #000099;
0
+ }
0
+ .pagination a:hover, .pagination a:active {
0
+ border: 1px solid #000099;
0
+ color: #000;
0
+ }
0
+ .pagination span.current {
0
+ padding: 2px 5px 2px 5px;
0
+ margin: 2px;
0
+ border: 1px solid #000099;
0
+ font-weight: bold;
0
+ background-color: #000099;
0
+ color: #FFF;
0
+ }
0
+ .pagination span.disabled {
0
+ padding: 2px 5px 2px 5px;
0
+ margin: 2px;
0
+ border: 1px solid #eee;
0
+ color: #ddd;
0
+ }
0
+
0
+More reading about pagination as design pattern:
0
+
0
+* Pagination 101:
0
+ http://kurafire.net/log/archive/2007/06/22/pagination-101
0
+* Pagination gallery:
0
+ http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
0
+* Pagination on Yahoo Design Pattern Library:
0
+ http://developer.yahoo.com/ypatterns/parent.php?pattern=pagination
...
53
54
55
56
 
 
57
58
59
 
 
60
61
62
...
64
65
66
 
67
...
53
54
55
 
56
57
58
 
 
59
60
61
62
63
...
65
66
67
68
69
0
@@ -53,10 +53,11 @@
0
 
0
 desc 'Generate RDoc documentation for the will_paginate plugin.'
0
 Rake::RDocTask.new(:rdoc) do |rdoc|
0
- files = ['README', 'LICENSE', FileList.new('lib/**/*.rb').exclude('lib/**/named_scope*')]
0
+ files = ['README.rdoc', 'LICENSE']
0
+ files << FileList.new('lib/**/*.rb').exclude('lib/will_paginate/named_scope*').exclude('lib/will_paginate/array.rb')
0
   rdoc.rdoc_files.add(files)
0
- rdoc.main = "README" # page to start on
0
- rdoc.title = "will_paginate"
0
+ rdoc.main = "README.rdoc" # page to start on
0
+ rdoc.title = "will_paginate documentation"
0
   
0
   templates = %w[/Users/chris/ruby/projects/err/rock/template.rb /var/www/rock/template.rb]
0
   rdoc.template = templates.find { |t| File.exists? t }
0
@@ -64,5 +65,6 @@
0
   rdoc.rdoc_dir = 'doc' # rdoc output folder
0
   rdoc.options << '--inline-source'
0
   rdoc.options << '--charset=UTF-8'
0
+ rdoc.options << '--webcvs="http://github.com/mislav/will_paginate/tree/master/%s"'
0
 end
...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
0
@@ -1 +1,70 @@
0
+!!!
0
+%html
0
+%head
0
+ %title Samples of pagination styling for will_paginate
0
+ %link{ :rel => 'stylesheet', :type => 'text/css', :href => 'pagination.css' }
0
+ %style{ :type => 'text/css' }
0
+ :sass
0
+ html
0
+ :margin 0
0
+ :padding 0
0
+ :background #999
0
+ :font normal 76% "Lucida Grande", Verdana, Helvetica, sans-serif
0
+ body
0
+ :margin 2em
0
+ :padding 2em
0
+ :border 2px solid gray
0
+ :background white
0
+ :color #222
0
+ h1
0
+ :font-size 2em
0
+ :font-weight normal
0
+ :margin 0 0 1em 0
0
+ h2
0
+ :font-size 1.4em
0
+ :margin 1em 0 .5em 0
0
+ pre
0
+ :font-size 13px
0
+ :font-family Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace
0
+
0
+- pagination = '<span class="disabled">&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">Next &raquo;</a>'
0
+- pagination_no_page_links = '<span class="disabled">&laquo; Previous</span> <a href="./?page=2" rel="next">Next &raquo;</a>'
0
+
0
+%body
0
+ %h1 Samples of pagination styling for will_paginate
0
+ %p
0
+ Find these styles in <b>"examples/pagination.css"</b> of <i>will_paginate</i> library.
0
+ There is a Sass version of it for all you sassy people.
0
+ %p
0
+ Read about good rules for pagination:
0
+ %a{ :href => 'http://kurafire.net/log/archive/2007/06/22/pagination-101' } Pagination 101
0
+ %p
0
+ %em Warning:
0
+ page links below don't lead anywhere (so don't click on them).
0
+
0
+ %h2 Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span>
0
+ %div= pagination
0
+
0
+ %h2 Digg.com
0
+ .digg-pagination= pagination
0
+
0
+ %h2 Digg-style, no page links
0
+ .digg-pagination= pagination_no_page_links
0
+ %p Code that renders this:
0
+ %pre= '<code>%s</code>' % %[<%= will_paginate @posts, :page_links => false %>].gsub('<', '&lt;').gsub('>', '&gt;')
0
+
0
+ %h2 Digg-style, extra content
0
+ .digg-pagination
0
+ .page-info Displaying entries <b>1&nbsp;-&nbsp;6</b> of <b>180</b> in total
0
+ = pagination
0
+ %p Code that renders this:
0
+ %pre= '<code>%s</code>' % %[<div class="digg-pagination">\n <div clas="page-info">\n <%= page_entries_info @posts %>\n </div>\n <%= will_paginate @posts, :container => false %>\n</div>].gsub('<', '&lt;').gsub('>', '&gt;')
0
+
0
+ %h2 Apple.com store
0
+ .apple-pagination= pagination
0
+
0
+ %h2 Flickr.com
0
+ .flickr-pagination
0
+ = pagination
0
+ .page-info (118 photos)
...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
0
@@ -1 +1,93 @@
0
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
0
+<html>
0
+</html>
0
+<head>
0
+ <title>Samples of pagination styling for will_paginate</title>
0
+ <link href='pagination.css' rel='stylesheet' type='text/css' />
0
+ <style type='text/css'>
0
+ html {
0
+ margin: 0;
0
+ padding: 0;
0
+ background: #999;
0
+ font: normal 76% "Lucida Grande", Verdana, Helvetica, sans-serif; }
0
+
0
+ body {
0
+ margin: 2em;
0
+ padding: 2em;
0
+ border: 2px solid gray;
0
+ background: white;
0
+ color: #222; }
0
+
0
+ h1 {
0
+ font-size: 2em;
0
+ font-weight: normal;
0
+ margin: 0 0 1em 0; }
0
+
0
+ h2 {
0
+ font-size: 1.4em;
0
+ margin: 1em 0 .5em 0; }
0
+
0
+ pre {
0
+ font-size: 13px;
0
+ font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace; }
0
+ </style>
0
+</head>
0
+<body>
0
+ <h1>Samples of pagination styling for will_paginate</h1>
0
+ <p>
0
+ Find these styles in <b>"examples/pagination.css"</b> of <i>will_paginate</i> library.
0
+ There is a Sass version of it for all you sassy people.
0
+ </p>
0
+ <p>
0
+ Read about good rules for pagination:
0
+ <a href='http://kurafire.net/log/archive/2007/06/22/pagination-101'>Pagination 101</a>
0
+ </p>
0
+ <p>
0
+ <em>Warning:</em>
0
+ page links below don't lead anywhere (so don't click on them).
0
+ </p>
0
+ <h2>
0
+ Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span>
0
+ </h2>
0
+ <div>
0
+ <span class="disabled">&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">Next &raquo;</a>
0
+ </div>
0
+ <h2>Digg.com</h2>
0
+ <div class='digg-pagination'>
0
+ <span class="disabled">&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">Next &raquo;</a>
0
+ </div>
0
+ <h2>Digg-style, no page links</h2>
0
+ <div class='digg-pagination'>
0
+ <span class="disabled">&laquo; Previous</span> <a href="./?page=2" rel="next">Next &raquo;</a>
0
+ </div>
0
+ <p>Code that renders this:</p>
0
+ <pre>
0
+ <code>&lt;%= will_paginate @posts, :page_links =&gt; false %&gt;</code>
0
+ </pre>
0
+ <h2>Digg-style, extra content</h2>
0
+ <div class='digg-pagination'>
0
+ <div class='page-info'>
0
+ Displaying entries <b>1&nbsp;-&nbsp;6</b> of <b>180</b> in total
0
+ </div>
0
+ <span class="disabled">&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">Next &raquo;</a>
0
+ </div>
0
+ <p>Code that renders this:</p>
0
+ <pre>
0
+ <code>&lt;div class="digg-pagination"&gt;
0
+ &lt;div clas="page-info"&gt;
0
+ &lt;%= page_entries_info @posts %&gt;
0
+ &lt;/div&gt;
0
+ &lt;%= will_paginate @posts, :container =&gt; false %&gt;
0
+ &lt;/div&gt;</code>
0
+ </pre>
0
+ <h2>Apple.com store</h2>
0
+ <div class='apple-pagination'>
0
+ <span class="disabled">&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">Next &raquo;</a>
0
+ </div>
0
+ <h2>Flickr.com</h2>
0
+ <div class='flickr-pagination'>
0
+ <span class="disabled">&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">Next &raquo;</a>
0
+ <div class='page-info'>(118 photos)</div>
0
+ </div>
0
+</body>
...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
0
@@ -1 +1,87 @@
0
+.digg-pagination {
0
+ background: white;
0
+ /* self-clearing method: */ }
0
+ .digg-pagination a, .digg-pagination span {
0
+ padding: .2em .5em;
0
+ display: block;
0
+ float: left;
0
+ margin-right: 1px; }
0
+ .digg-pagination span.disabled {
0
+ color: #999;
0
+ border: 1px solid #DDD; }
0
+ .digg-pagination span.current {
0
+ font-weight: bold;
0
+ background: #2E6AB1;
0
+ color: white;
0
+ border: 1px solid #2E6AB1; }
0
+ .digg-pagination a {
0
+ text-decoration: none;
0
+ color: #105CB6;
0
+ border: 1px solid #9AAFE5; }
0
+ .digg-pagination a:hover, .digg-pagination a:focus {
0
+ color: #003;
0
+ border-color: #003; }
0
+ .digg-pagination .page-info {
0
+ background: #2E6AB1;
0
+ color: white;
0
+ padding: .4em .6em;
0
+ width: 22em;
0
+ margin-bottom: .3em;
0
+ text-align: center; }
0
+ .digg-pagination .page-info b {
0
+ color: #003;
0
+ background: #6aa6ed;
0
+ padding: .1em .25em; }
0
+ .digg-pagination:after {
0
+ content: ".";
0
+ display: block;
0
+ height: 0;
0
+ clear: both;
0
+ visibility: hidden; }
0
+ * html .digg-pagination {
0
+ height: 1%; }
0
+ *:first-child+html .digg-pagination {
0
+ overflow: hidden; }
0
+
0
+.apple-pagination {
0
+ background: #F1F1F1;
0
+ border: 1px solid #E5E5E5;
0
+ text-align: center;
0
+ padding: 1em; }
0
+ .apple-pagination a, .apple-pagination span {
0
+ padding: .2em .3em; }
0
+ .apple-pagination span.disabled {
0
+ color: #AAA; }
0
+ .apple-pagination span.current {
0
+ font-weight: bold;
0
+ background: transparent url(apple-circle.gif) no-repeat 50% 50%; }
0
+ .apple-pagination a {
0
+ text-decoration: none;
0
+ color: black; }
0
+ .apple-pagination a:hover, .apple-pagination a:focus {
0
+ text-decoration: underline; }
0
+
0
+.flickr-pagination {
0
+ text-align: center;
0
+ padding: .3em; }
0
+ .flickr-pagination a, .flickr-pagination span {
0
+ padding: .2em .5em; }
0
+ .flickr-pagination span.disabled {
0
+ color: #AAA; }
0
+ .flickr-pagination span.current {
0
+ font-weight: bold;
0
+ color: #FF0084; }
0
+ .flickr-pagination a {
0
+ border: 1px solid #DDDDDD;
0
+ color: #0063DC;
0
+ text-decoration: none; }
0
+ .flickr-pagination a:hover, .flickr-pagination a:focus {
0
+ border-color: #003366;
0
+ background: #0063DC;
0
+ color: white; }
0
+ .flickr-pagination a[rel="next"] {
0
+ border-width: 2px; }
0
+ .flickr-pagination .page-info {
0
+ color: #aaa;
0
+ padding-top: .8em; }
...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
0
@@ -1 +1,88 @@
0
+.digg-pagination
0
+ :background white
0
+ a, span
0
+ :padding .2em .5em
0
+ :display block
0
+ :float left
0
+ :margin-right 1px
0
+ span.disabled
0
+ :color #999
0
+ :border 1px solid #DDD
0
+ span.current
0
+ :font-weight bold
0
+ :background #2E6AB1
0
+ :color white
0
+ :border 1px solid #2E6AB1
0
+ a
0
+ :text-decoration none
0
+ :color #105CB6
0
+ :border 1px solid #9AAFE5
0
+ &:hover, &:focus
0
+ :color #003
0
+ :border-color #003
0
+ .page-info
0
+ :background #2E6AB1
0
+ :color white
0
+ :padding .4em .6em
0
+ :width 22em
0
+ :margin-bottom .3em
0
+ :text-align c