Rails2中使用will_paginate插件实现分页（续）--- 更改样式

最新推荐文章于 2018-02-23 15:42:04 发布

原创最新推荐文章于 2018-02-23 15:42:04 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#rails #stylesheet #xhtml #class #path #html

本文介绍如何在Rails应用中通过修改HTML和引用不同CSS样式来调整分页组件的外观。具体步骤包括拷贝pagination.css到指定目录、更新HTML模板文件以引入新样式，并通过更改Div的class来切换不同的分页样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接上例：http://blog.youkuaiyun.com/kunshan_shenbin/archive/2009/05/14/4182610.aspx

目的：更改显示样式风格。

做法：

1.拷贝插件中pagination.css文件至工程public/stylesheets/下；

2.修改products.html.erb文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Products: <%= controller.action_name %></title> <%= stylesheet_link_tag 'scaffold', 'pagination' %> </head> <body> <p style="color: green" mce_style="color: green"><%= flash[:notice] %></p> <%= yield %> </body> </html>

3.修改index.html.erb文件：

<h1>Listing products</h1> <table> <tr> <th>Title</th> <th>Description</th> <th>Image url</th> <th>Price</th> </tr> <% @products.each do |product| %> <tr> <td><%=h product.title %></td> <td><%=h product.description %></td> <td><%=h product.image_url %></td> <td><%=h product.price %></td> <td><%= link_to 'Show', product %></td> <td><%= link_to 'Edit', edit_product_path(product) %></td> <td><%= link_to 'Destroy', product, :confirm => 'Are you sure?', :method => :delete %></td> </tr> <% end %> </table> <hr> <div class="digg_pagination"> <div clas="page_info"> <%= page_entries_info @products %> </div> <%= will_paginate @products, :prev_label => '上一页', :next_label => '下一页', :container => false %> </div> <hr> <br/> <%= link_to 'New product', new_product_path %>

工程结果如下图：