乐者为王

Do one thing, and do it well.

用Rails 2.3打造简单记账应用(9)

没啥多说的,继续开始干活。

修改app/views/entries/index.html.erb为:

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
<h1>Listing entries</h1>

<table>
  <thead>
    <tr>
      <th class="center">Date</th>
      <th class="center">Amount</th>
      <th class="center">Tags</th>
      <th class="center">Comment</th>
      <th class="center">Action</th>
    </tr>
  </thead>

  <tbody>
    <% @entries.each do |entry| %>
    <tr class="<%= cycle('odd', 'even') %>">
      <td class="center"><%=h entry.effective_date %></td>
      <td class="right"><%=h number_to_currency(entry.amount) %></td>
      <td><%=h entry.tags %></td>
      <td><%=h entry.comment %></td>
      <td class="center">
        <%= link_to 'Edit', edit_entry_path(entry) %>
        <%= link_to 'Destroy', entry, :confirm => 'Are you sure?', :method => :delete %>
      </td>
    </tr>
    <% end %>
  </tbody>
</table>

<%= link_to 'New entry', new_entry_path %>

修改app/views/layouts/application.html.erb文件的内容为:

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
<!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>Qianbao: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
  <%= stylesheet_link_tag 'qianbao' %>
  <%= stylesheet_link_tag 'table' %>
</head>

<body>
  <div id="container">
    <%= render :partial => 'layouts/header' %>

    <div id="content">
      <p style="color: green"><%= flash[:notice] %></p>

      <%= yield %>
    </div>

    <%= render :partial => 'layouts/footer' %>
  </div>
</body>
</html>

新建app/views/layouts/_header.html.erb文件:

1
2
3
4
5
6
7
8
9
10
11
<div id="header">
  <%= link_to 'Home', root_path %>
  <% if logged_in? %>
    <%= link_to 'All entries', entries_path %>
    <strong>You are logged in as <%= current_user.login %></strong>
    <%= link_to 'Logout', logout_path %>
  <% else %>
    <%= link_to 'Login', login_path %>
    <%= link_to 'Sign Up', signup_path %>
  <% end %>
</div>

新建app/views/layouts/_footer.html.erb文件:

1
<div id="footer">© 2009</div>

在public/stylesheets/qianbao.css的末尾添加:

1
2
3
4
5
6
7
.center {
  text-align: center;
}

.right {
  text-align: right;
}

新建public/stylesheets/table.css,内容为:

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
table {
  border-collapse: collapse;
  text-align: left;
  width: 90%;
}

thead {
  height: 30px;
}

thead th {
  padding: 5px;
  background: #efefef;
}

tbody td {
  padding: 5px;
}

th, td {
  border: 1px solid #e6e6e6;
}

tr.odd {
  background: #fff;
}

tr.even {
  background: #f9f9f9;
}

代码下载:https://github.com/dohkoos/qianbao

Comments