FaceboxRender: Rails 無縫使用 lightbox

FaceboxRender 是我最近寫的第二個 Ajax UI plugin，它讓你在 Rails 中可以無縫使用 lightbox 效果，搭配使用的 Javascript library 正如其名是 Facebox。首先你得先裝好 jQuery 和 Facebox:

1. 下載 jQuery (建議你可以考慮用 jRails 完全換掉 Prototype library)
2. 下載 facebox
3. 把 facebox js file 放到 /public/javascripts/
4. 把 facebox css file 放到 /public/styleshees/
5. 把 facebox all image files 放到 /public/facebox/
6. 設定好 layout 的 stylesheet_link_tag 和 javascript_include_tag 加入這些 js,css 檔案

facebox-render 目前放在 github，請下載後放到 vender/plugins/facebox_render

然後在你要使用的 Controller 加入以下程式碼

 include FaceboxRender

或是你直接放到 /app/controllers/application.rb 裡面也是可以。

回到 view code，當你要叫出一個 lightbox :

 facebox_link_to "Login", :url => login_url

或是你也可以用 remote_link_to, remote_form_tag 等Rails內建的 Ajax Helper，差別在於 facebox_link_to 會先秀出一個 Loading lightbox，然後再送 Ajax request。

重頭戲是 action :

def new
 # do some thing you want
 respond_to do |format|
  format.html
  format.js { render_to_facebox }
 end
end

這裡巧妙的運用了 respond_to 來處理 ajax request，預設的 render_facebox 會 render 不帶 layout 的HTML(即 new.html.erb)。當然我們也支援傳入 :action, :template, :partial 等常見的Rails參數，或是乾脆傳入 :html 也可以。

傳入 :msg 的話，會插入一段 <div class=”message”>your msg</div> 到裡面去，方便你做一些提示或警告訊息。

除了 render_facebox，也有 close_facebox 可以關掉 lightbox。也可以用 redirect_from_lightbox 重新讀取另一頁。

實際的應用非常方便，你可以在網頁中用 remote link 或是 remote form submit 叫出 facebox。在 facebox 中也還可以再放 remote link 或 remote form submit，接收處理的 action 可用 render_facebox 或關掉 close_facebox 抑或重新讀取頁面 redirect_from_facebox。

FaceboxRender 的隨附文件請見 README 。

P.S. 這篇文的英文版在 Handlino’s blog