Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Easy tabbed navigation for Rails

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 lib
Octocat-spinner-32 test
Octocat-spinner-32 .gitignore
Octocat-spinner-32 .project
Octocat-spinner-32 CHANGELOG.rdoc
Octocat-spinner-32 Gemfile
Octocat-spinner-32 MIT-LICENSE
Octocat-spinner-32 README.rdoc
Octocat-spinner-32 Rakefile
Octocat-spinner-32 tabulous.gemspec
README.rdoc

Tabulous

Description

Tabulous provides an easy way to add tabs to your Rails application.

Requirements

Tabulous only works with Rails 3.0 and 3.1. It has been tested on Ruby 1.8.7 and 1.9.2.

Usage

Traditionally, implementing tabs in Rails involves adding logic to your views and sprinkling tab-related code all over your controllers. Tabulous takes a different approach and consolidates all of the tab-related code into one configuration file. Apart from this configuration file, you just have to call <%= tabs %> and <%= subtabs %> in your view layout(s) and then create your own CSS styles for the tabs.

To get started, add the gem to your Rails application's Gemfile and install it using:

bundle install

Then generate the tab file:

rails generate tabs

This will generate app/tabs/tabulous.rb. Open the file and configure it to your liking. You'll notice the code is formatted into a grid. After you edit the file, run the following rake task to prettify the code back into a nice grid:

rake tabs:format

Make sure you call the following view helpers in your layout(s):

<%= tabs %>
<%= subtabs %>

The tabs helper will generate markup that looks like this:

<div id="tabs">
  <ul>
    <li class="active enabled"><span class="tab">Explanation</span></li>
    <li class="inactive enabled"><a href="/galaxies/elliptical_galaxies" class="tab">Galaxies</a></li>
    <li class="inactive enabled"><a href="/exoplanets" class="tab">Planets</a></li>
    <li class="inactive enabled"><a href="/stars" class="tab">Stars</a></li>
    <li class="inactive disabled"><span class="tab">Asteroids</span></li>
  </ul>
</div>

And the subtabs helper will generate markup that looks like this:

<div id="subtabs">
  <ul>
    <li class="active enabled"><span class="tab">Exoplanets</span></li>
    <li class="inactive enabled"><a href="/rogue_planets" class="tab">Rogue Planets</a></li>
  </ul>
</div>

Tabulous will start you off with some CSS scaffolding but you'll eventually want to create your own CSS.

Examples

There is a tutorial at techiferous.com/2011/03/tutorial-for-adding-tabs-to-rails-using-tabulous/

Also, look in this gem's test/applications directory to find working example applications. Look at their app/tabs/tabulous.rb and app/layouts/application.html.erb files.

Contributing

Developers are encouraged to contribute ideas or code.

To make code changes:

  • First, check out this gem's code from github.

  • Next, type bundle install in tabulous's directory. This will install any gems you need for developing tabulous.

  • Then go to each directory in test/applications and type bundle install. This makes sure the test applications have the gems that they need to run.

  • To save you the effort of having to create and migrate databases for each test application, I've committed the sqlite databases of each test application to the repository.

  • Now go to tabulous's directory and type rake test. If everything has been installed properly, all of the tests will pass.

  • Now you should be all set to code.

Please send me a message if you find any confusing or incorrect documentation in tabulous or if you encounter any bugs. Thank you and enjoy!

Something went wrong with that request. Please try again.