Prototype windowを利用する。

rails

Prototype window
Railsに標準で入っている prototype.js にウィンドウ機能を追加するJavaScript集。
簡単なRails用ヘルパも入っているので統合するのは楽そう。

準備

  1. ダウンロード・解凍。
  2. helper/prototype_window_class_helper.rb を railsapp/app/helpers/ へ配置。
  3. javascripts/*.js を railsapp/public/javascripts/ へ配置。
    • もともとあるのはコピーしなくてもOK。
  4. themesをフォルダごと、railsapp/public/stylesheets/ へ配置。

使う（Rails 1.2.2）

まず、ヘルパを組み込む。（ただ、コメントに書かれていた方法ではうまくいかず。なんか勘違いしてるかな？）

railsapp/app/helpers/application_helper.rb

# Methods added to this helper will be available to all templates in the application.
module ApplicationHelper
  include PrototypeWindowClassHelper #この行を追加。
end

つぎ、レイアウトにCSSとJSを組み込む。

railsapp/app/views/layouts/hogehoge.rhtml

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>Hogehoge</title>
  <%= stylesheet_link_tag 'ajax_scaffold', :media => 'all' %> #これはAjaxScaffoldGenerator用。windowと同居できるみたい。
  <%= stylesheet_link_tag 'themes/alert' %> #追加。
  <%= stylesheet_link_tag 'themes/default' %> #追加。
  <%= stylesheet_link_tag 'themes/nuncio' %> #使いたいテーマがあれば、このように追加。
  <%= javascript_include_tag :defaults %>
  <%= javascript_include_tag 'rico_corner', 'ajax_scaffold' %> #これはAjaxScaffoldGenerator用。
  <%= javascript_include_tag 'window' %> #追加。
</head>
<body>

<%= @content_for_layout %>

</body>
</html>

最後、ビューにヘルパを組み込む。まずはサンプル通りに。

test1.rhtml

<%= link_to_prototype_dialog( 'Link', 'Hello world', 'alert' ) %>
<%= link_to_prototype_window( 'Link', 'window_id_1', { :title => 'Window title Default', :left => 200, :top => 200 }) %>
<%= link_to_prototype_window( 'Link', 'window_id_2', {  :className => 'nuncio', :title => 'Window title nuncio', :left => 200, :top => 200 }) %>

もういっちょ、scaffoldの一覧ページを出してみる。

test2.rhtml

<%= link_to_prototype_window( 'Link', 'window_id_1', {
	:className => 'nuncio',
	:title => 'Window title nuncio',
	:left => 50,
	:top => 50,
	:url => '/hogehoges/list' }) %>