Red Box

Red Box is inspired by the lightbox and thickbox libraries. It includes ports of code from both of these. The only reason for Red Box to exist is to achieve the same goal as Thickbox, but to do it in a Rails friendly way.

What does it do?

It pops a modal box over a web page, using CSS and javascript, so that you can ask the user a question, or show them something important. The box can be loaded from content already on the page (but hidden), or it can be loaded via AJAX. The contents of the box can be replaced using AJAX, for multi-page forms, and it can be closed easily using a javascript link.

How is it different from thickbox?

• It's been ported back to Prototype and Scriptaculous. This isn't because I think they are better or worse than JQuery. It's just because that's what rails sites generally use.
• It doesn't contain any AJAX functionality of it's own, instead, the normal Rails ajax stuff is used.
• It contains nice helpers, that mimic the usage of the Rails "link_to" helpers.
• It's a rails plugin, to it's easy to install and use.

Demo

Don’t listen to me talk about it. Click Here to go try it out.

Installation

Redbox is a rails plugin. You can install it using:

script/plugin install svn://rubyforge.org/var/svn/ambroseplugins/redbox

Please not that this copies three files into the appropriate public directories, being redbox.js, redbox.css and redbox_spinner.gif. If you already have files with these names, they will be overridden.

If you are updating an existing redbox installation, or if you accidentally delete those files, you can have them copied into the right spots again by typing the following from within you vendor/plugins/redbox directory

@rake update_scripts

Setup

All you need to do is include the javascript and css files into your layout. You’ll also need to include the default rails javascript files (if you aren’t already).

<%= stylesheet_link_tag 'redbox' %>
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag 'redbox' %>

Usage

Redbox provides three helpers which are used instead of a regular “link_to” helper when linking to a redbox.

link_to_redbox(name, id, html_options = {})

This is used if you already have an HTML element in your page (presumably hidden, but it doesn’t have to be) and you wish to use it for your redbox. Specify it by it’s id, and you’re in business.

link_to_component_redbox(name, url_options = {}, html_options = {})

This serves essentially the same purpose, but it uses the url_options supplied to load another page from your app into a hidden div on page load. This saves you having to do it yourself, but beware that there are definite performance implications to using components.

link_to_remote_redbox(name, link_to_remote_options = {}, html_options = {})

This waits until the link is clicked on to load the redbox using ajax, and displays loading graphics while it’s waiting.

link_to_close_redbox(name, html_options = {})

Allows you to put a link (presumably inside the redbox) to close it. Other way to close it is to refresh the entire page, but obviously closing it with javascript is spiffier.

Location

svn://rubyforge.org/var/svn/ambroseplugins/redbox