Created: 2008-05-08 03:02
Updated: 2016-05-11 21:31


Javascript Column Control

A simple way to create a column view control on the web. While originally built to integrate with a Ruby on Rails app, there is no dependency on Ruby or Rails.

NOTE: This is a very early first version of this control. It's provided as-is with no warrantee. Best of luck!


Creates a column control within the element id passed. Pass in the root of the tree that should be used. Each action called should return a UL with multiple LI's defined. Currently, it will look in the attribute 'pathname' on the LI to know which url to hit next.


The following is a simple example. <script src="js/column_control.js" type="text/javascript"></script>

<script> var columns = new Ajax.ColumnControl( 'foo', '/root/path/for/items'); </script>

This will contact /root/path/for/items for it's initial list. It expects to get back a normal unformatted list.

  <li pathname='foo'>Foo</li>
  <li pathname='bar'>Bar</li>

Note that the only odd thing here is the extra attribute 'pathname'. This will be used to generate the url that we'll hit when someone clicks on the list item. If someone clicks on "Foo" then the column control will hit /root/path/for/items/foo on the server for the next set of options. This continues as far down as needed.

Simple example.

In the base/example directory and run:

ruby server.rb

Then go to http://localhost:3000/ in your browser.


CSS should be used to style the columns. Each column can include any css info it needs to. Additionally, the following classes will be applied at the appropriate times:

  • UL level classes

    • column_0, column_1, column_2, ...
    • current_column
  • LI level classes

    • current
    • selected
    • hover


  • pathName - The name of the attribute that will be used to build the path url on each click (pathname by default)
  • keyBindings - Turn on/off key bindings which enable keyboard navigation (true/false, on by default)
  • ajaxOptions - Any options that should be passed with each ajax call


Prototype and Scriptaculous

Scriptaculous is only used for the effect of scrolling to the right. This could probably be turned off without too much work if you don't want this dependency.


This control was built by Shad Reynolds for Spiceworks. Twitter: @shadr

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more