Previous Lecture Complete and continue  

  制作漂亮的“提示讯息”

目标

  • 你应该看过一些网站,有这样的提示讯息吧?
  • 这一节的目的在于让你学习到,在 Rails 内如何配合 Bootstrap 内建的特效,建立“提示讯息”。

步骤

Step 1. 将 Boostrap 的 js 提示套件 bootstrap/alert “挂”进专案里面

requre_tree 上加入 //= require bootstrap/alert

app/assets/javascripts/application.js
... (一堆注解)
//= require jquery
//= require jquery_ujs
//= require turbolinks
+//= require bootstrap/alert
//= require_tree .

	

+在这里是新增的意思,不用复制贴上

Step 2. 新增 app/views/common/_flashes.html.erb

touch app/views/common/_flashes.html.erb

填入

app/views/common/_flashes.html.erb
<% if flash.any? %>
  <% user_facing_flashes.each do |key, value| %>
    <div class="alert alert-dismissable alert-<%= flash_class(key) %>">
      <button class="close" data-dismiss="alert">×</button>
      <%= value %>
    </div>
  <% end %>
<% end %>
	

Step 3. 加入 app/helpers/flashes_helper.rb

touch app/helpers/flashes_helper.rb

加入以下内容:

app/helpers/flashes_helper.rb
module FlashesHelper
  FLASH_CLASSES = { alert: "danger", notice: "success", warning: "warning"}.freeze
  def flash_class(key)
    FLASH_CLASSES.fetch key.to_sym, key
  end
  def user_facing_flashes
    flash.to_hash.slice "alert", "notice","warning" 
  end
end
	

Step 4. 在 application.html.erb 内加入 flash 这个 partial

<%= yield %> 前加入 <%= render "common/flashes" %>

app/views/layout/application.html.erb
  <%= render "common/flashes" %>
  <%= yield %>
	

Step 5. git 存档

git add .
git commit -m "add bootstrap flash function"
	

Step 6: 测试 flash helper 的功能

修改 app/controllers/welcome_controller.rb。加入 flash[:notice] = "早安!你好!"。你应该可以看到系统跳出“绿色”提示窗。

app/controllers/welcome_controller.rb
class WelcomeController < ApplicationController
  def index
    flash[:notice] = "早安!你好!"
  end
end
	

修改 app/controllers/welcome_controller.rb。加入 flash[:alert] = "晚安!该睡了!"。你应该可以看到系统跳出“红色”提示窗。

app/controllers/welcome_controller.rb
class WelcomeController < ApplicationController
  def index
    flash[:alert] = "晚安!该睡了!"
  end
end
	

修改 app/controllers/welcome_controller.rb。加入 flash[:warning] = "这是 warning 讯息!"。你应该可以看到系统跳出“黄色”提示窗。

app/controllers/welcome_controller.rb
class WelcomeController < ApplicationController
  def index
   flash[:warning] = "这是 warning 讯息!"
  end
end
	

解说:

我看不懂 FlashesHelper 那边,可以解说一下吗?

  • 我们后面会解释,请先跳过。
  • 你只要先记得三件事:
    • flash[:notice] 是绿色讯息
    • flash[:alert] 是红色讯息
    • flash[:warning] 是黄色讯息