shad / column_control

A nice javascript based column view control.

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!

Overview

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.

SIMPLE EXAMPLE

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.

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

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

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

OPTIONS

• 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

Dependencies

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.

Contact

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