Preview: jQuery Multicolumn Dropdown Plug-in

Categories: jQuery

One of the UI components I'm in need of from time to time, is a hierarchy tree where the user needs to select an option. While there are plenty of "tree" scripts, they take up a lot of screen reality and involve lots of clicking. I've always thought I could come up with a better UI component, so we started working on script that would create downdown component that supported hierarchical data.

The problem with doing a dropdown is that if you have a lot of data (which is often the case for us) data really quickly rolls off the screen. To resolve this issue, we split the list into multiple columns when there's too much data. Here's a screenshot of what the dropdown looks like:

Multicolumn Dropdown Screenshot

I'm hoping to wrap this plug-in up in the next few weeks and release as open source. In the meantime, here's a little screen capture that shows the plug-in in action.

Related Blog Entries

Comments

Christian Ready's Gravatar This looks really nice and I can easily see how handy it would be to have around. Tell me, would it require a form dropdown or could it also work off, say, a menu item in a horizontal navigation tree?

Keep up the great work!
tony petruzzi's Gravatar incredible.
Dan G. Switzer, II's Gravatar @Christian:

Our need was specifically for a form UI component. So it's designed to create the look of a select element, with the dropdown being the trigger event.

It wouldn't be that hard to attach the dropdown to another random event, but it's not something I'll do before releasing (since it's not really a need for us at the moment.)

The majority of the code in the plug-in is designed to handle creating the multi-column lists and for positioning.
Andy Matthews's Gravatar Dan...this looks top notch! Good on you and I can't wait to see a working demo.
jon jack's Gravatar That would be an excellant piece of GUI work. And credit to you for making it open source
Nate Cavanaugh's Gravatar This is incredibly awesome stuff. I'm excited to see this come out. I can think of quite a few places I'll be able to use it.

Looking forward to it Dan :)
Chris's Gravatar Please post the code on GitHub ASAP.
Dan G. Switzer, II's Gravatar We finally released the plug-in:

http://www.givainc.com/labs/mcdropdown_jquery_plug...

If you like it, don't hesitate to digg it:
http://digg.com/programming/Multicolumn_Dropdown_j...

Add Comment



If you subscribe, any new posts to this thread will be sent to your email address.