Read my book

Monday, September 20, 2010

Sidebar in RightJS

I came by RightJS, a JavaScript framework, during the last week. The project just reached an important milestone as version 2.0 was released earlier today. Those familiar with jQuery will probably be able to pick up the library fast. Compared to jQuery RightJS provides some additional functionality (classes, utilities) and syntactic sugar. So far I have liked it!

As an experiment I decided to implement a simple sidebar using the library. The basic idea is that a sidebar contains a main area and a handle. Clicking the handle either opens or closes the sidebar depending on its current status.

It's possible to vary this behavior in various ways (ie. by making the handle draggable) but just this simple case is enough to demonstrate the usage of library. Let's have a look at the code then:

Most of the code probably looks quite straightforward if you have used jQuery before. It's just a matter of selecting appropriate element, assigning an event handler to it and then animating it a little bit. To keep it simple I separated the "toggle" behavior to a generator.

I am aware that JS 1.7 contains support for. That's something I'm not willing to count on, however, so I ended up implementing a small class encapsulating the idea.

The example isn't probably enough to actually convince someone to check out the library. I guess the showcases available do better job at that. Have fun exploring RightJS, apparently the right JS framework for various little apps. :)