Menubar and jQuery Layout Elements for Nitrogen

Quite interestingly in jQuery UI library there is a distinction between “Menu” and “Menubar” elements, and even more intriguing “Menubar” element is missing from the official jQuery release and only present in development branch.

jQuery UI Menu element allows vertical position of menu items:

Screen Shot 2013-01-26 at 21.53.23

Whereas Menubar is designed for horizontal position of items:
Screen Shot 2013-01-26 at 21.55.53.

What was the difficulty in making a single control which would include both a vertical and horizontal options is beyond me. There is an interesting discussion on Stackoverflow which explains some of the pain people went into trying to convert standard vertical Menu element into horizontal.

I added a Nitrogen wrapper for Menubar jQuery element into Nitrogen_Elements project using the code from the Developement branch. Hopefully one of the future official jQuery UI releases will include Menubar element.

The next addition to the set of Nitrogen_Elements is implementation of jQuery Layout element. Here is official site for jQuery UI Layout Plug-in, it has tons of examples in Demo section.

Layout element simplifies design by splitting screen real estate into pre-set areas: North, West, East, South and Central:

Screen Shot 2013-01-26 at 21.41.29

You have options to configure each area. This is very convenient for quick prototyping.

Rusty Klophaus used this element for his Nitrogen Demo project Slideblast. I would highly recommend to study this project if you want to learn more about advanced Nitrogen usage.

Here is the video presentation on Slideblast and Riak which Rusty gave at one of the Erlang Factories couple of years ago.

I re-used most of the Rusty’s code with small corrections and added this control into Nitrogen_Elements.

here are the screenshots for couple of examples :

Screen Shot 2013-01-26 at 21.41.58

Screen Shot 2013-01-26 at 21.42.23

I updated the Nitrogen_Elements_Examples which could be found here and give use cases for several already implemented elements.

This entry was posted in custom Nitrogen elements, Erlang, Nitrogen, Uncategorized and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s