Monday, September 1, 2008

Select Box Factory v1.0

Versiosn 1.0 is still supported, but version 2.0 is enhanced with many new features. It is for jQuery only, where this 1.0- version is for mooTools 1.1

See Select Box Factory 2.0 for jQuery

Download v 1.0

Here, the factory has produced a multiple-select box, with "sifting" tool attached. Try searching for one of the items in the list, or typing a letter in there. Next to it is the exact same list rendered as a dropdown (takes about 5 seconds to make this transition).

Why not cram some images in there? Here are images representing ranges, so search for "upper" for upper range, and see what happens:

Or what if we took the first two examples, but this time made the first list a "select-one" list, but wanted it to be open? And maybe we don't want the eraser in the dropdown on the right... and for some reason we also want a count at the bottom.

Select-ones with toggles, like on the right side are one of the weirdest variations and I recommend not to use them, but they are there. Because they are not dropdowns, the selections do not cause the toggler to "snap" back. To do this, you make it a "dropdown".

Next is an example of a select box whose elements were not found on the page, but rather in the definition. Inside the JSON object called "definition" is a child JSON object called "choices". The order to add items was specified as ascending (descending is also possible).

The code won't sort a list for you - it assumes you know the order. Try adding or removing items below, and have a look at the code in the zip file for more. Remove does remove a predefined item, but its nothing to make this remove selected items or based on a passed-in value.

But wait... its gets even more interesting. I've added the ability to show and toggle a certain number of states. I call this a heatmap, and it has many uses. Let's say you retrieve items where some are errors, some are warnings and some are info messages. Not only can you filter on those states, you get convenience buttons too. (unfortunately, there is not a lot of room for the buttons to have text). The states are numeric (0-5), so the buttons are nice when the users don't know the states - its more visual than anything.

All you have to do is add a state property to your items as an attribute, and boom, the code crawls over your items and figures out all the states on its own. It may be tough to see the selections here, but its up to you to skin these the way that makes sense to you. Add any colors that you want. Whether to show the convenience buttons or not is up to you. These work up to a point - since your dropdown can only be so wide. The code does its best to fit them in based on your css styles. For now, the states are numeric no matter what.

Try this: in the box on the right, first click the yellow button, then type "J" in the sift box. Its a filter within a filter.

Then try this: Click the eraser to clear the box, then click the yellow button again. Except this time, in the box, add "|v" (without quotes). The box should read 2|v. See what happens. (| pipe means "or")

Above you see some of the many variations that are possible with the select box factory. You see a multiple-select box opened with a max size of 6, that is capable of using the sift tool. Here are some ways to test its capabilities.

  • Try using control key to choose items like you might in a normal select box. Do this on the select-multiple boxes.
  • Use the shift key to do the same.
  • Click the eraser and see what happens.
  • Type something in the text box and see what happens.
  • Try typing the letter I while focused in the box and see what happens.

Download v 1.0

See Comparison

Results of performance testing

About the tool in general
  • Uses divs instead of options, which is why the potential for extension is nearly unlimited.
  • Does whatever a dropdown can do, but goes far beyond.
  • It is easy to call up a dropdown, assuming you have a div on your page that you are using as a dropdown.
  • All variations can fit a container, whose style you must supply in css, or it can live by itself, using itself as a container.
  • All variations are relative positioning, but work great positioned absolutely, or stacked on top of each other with z-index. This is up to your css and design, but they fit well. The above examples have a lot of whitespace because I am showing them inside iframes with the iframe border turned to no/0.
  • All variations can be enabled and disabled.
  • All variations are very, very easy to style in css. Just edit selects.css and you are done. You can even style the scrollbars if your browser supports it. (I suppose the ultimate incarnation would not even have that overflow scrollbar, but its not as easy as it looks to make one work without using overflow this way - its not something I am going to work on.)

There are three major variations to this..

A dropdown
  • works just like a standard javacript dropdown
  • can take images, which dropdowns can't do.
  • can show as many items before rendering a scrollbar as you want.
  • has a neat eraser icon so you can "undo" your selections. normal dropdowns don't do this, but I think they should.
  • It will allow you to show it opened or closed by default, which dropdowns today can't do. This is neat, because you can "show your users" an interface you want them to touch on the onset.
  • All variations can show a count of what is selected, but only the toggle versions (select one, and dropdown) will show you in text form what that select is at the top.
  • All variations will seek out and highlight the first item in a list based on the key you press. (although i don't have this working in safari yet).
A multiple select box
  • My favorite variation, shown above.
  • You can put a sift tool on top of it for nice searching.
  • You can put no toggle or sift on it, so it looks like a normal dropdown.
  • It uses spreadsheet style selections.
A select-one box.
  • very much like setting a select box to have a size of 1, this variation would be less common but has a ton of uses.
  • This isn't a dropdown, but can act like one. The biggest difference between this and a dropdown is that a dropdown snaps back and this one stays open.
I have been working on these dropdowns for a few months now, and perfecting all the browser-compatible and performance issues.

Needless to say, there are a wide variety of ways to use these dropdowns and I hope people find them intuitive to use. They are part of a more extensive "ui factory class" that I have created to plug into mooTools. This select box factory is enough for now.

(It expects mooTools v.1.11 but honestly, the only real neat effect is a toggle() so this can easily be ported to mooTools v1.2).

I will be fixing bugs and enhancing performance in the weeks to come to make them even faster.


Anonymous said...

Great component!! How would it handle optgroups?

The Ui Guy said...

Good question. Since this is based on divs, I'd have to emulate a standard select box option group and I think it is a great idea. Version 1.1 will have it. Thanks!

Bandini said...

Great work; selects are evil as hell for styling, and this could be a good option.

Greetings from Spain

The Ui Guy said...

Hello Spain! I have some family friends in Barcelona, i hear its beautiful. Thanks for the comment - styling was one of the many reasons why I wanted to do this.

Jaik said...

Very, very nice :) There is an issue for Mac users though. Ctrl+click on a Mac opens the context menu. The equivalent for selecting multiple items is the Apple/command key.

The Ui Guy said...

Thank you much. I will see what others have done for mac users. Hopefully there is a way to get this to work. I added that to the wishlist.

congkai said...

hi ui Guy,

first of all, good script. but i seems to have some problem. everything loaded well. but when i submit form, dropdown2 is always null. my form has other things like mootools calander and shorts of things. making me headache.

can you please help me? possible for you to give me your email so that i can contact via email? my email is congkai[at]

hjkl said...

EVEN by wow gold the standards gold in wow of the worst financial buy wow gold crisis for at least wow gold cheap a generation, the events of Sunday September 14th and the day before were extraordinary. The weekend began with hopes that a deal could be struck,maplestory mesos with or without government backing, to save Lehman Brothers, America''s fourth-largest investment bank.sell wow gold Early Monday buy maplestory mesos morning Lehman maplestory money filed for Chapter 11 bankruptcy protection. It has more than maplestory power leveling $613 billion of debt.Other vulnerable financial giants scrambled maple money to sell themselves or raise enough capital to stave off a similar fate. billig wow gold Merrill Lynch, the third-biggest investment bank, sold itself to Bank of America (BofA), an erstwhile Lehman suitor,wow power leveling in a $50 billion all-stock power leveling American International Group (AIG) brought forward a potentially life-saving overhaul and went maple story powerleveling cap-in-hand to the Federal Reserve. But its shares also slumped on Monday.

Ajans said...

Thanks you too much, this is wonderful!

k said...

thanks dude

araba oyunlari said...

thanks it s nice

yi said...

Hello, everybody. I am a new hand to be here. So nice to meet you all. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rahul said...

Is it possible to implement Drag n drop functionality on this select box