Friday, February 20, 2009

Select Box Factory 2.2j (improvements)

Note: the latest version is 2.2.1j, which allows for images and text in the dropdown at the same time, and allows images to appear in the toggle.

The improvements to 2.2j (also included in 2.2.1j) are explained below.

I've been tinkering with SelectBoxFactory (Help Guide) mainly because I have been getting
some feedback and want to provide some real world use cases. The tool did not come out of the box with any hooks to accept onChange events, and many people asked how they could "retrieve" the values of the dropdown.

The result is SelectBoxFactory 2.2... (or 2.2j, same thing for now - from now on always in jQuery unless someone needs it in mooTools). Its a modest improvement, but one that I think will enable more people to use it, and to me thats a more important change.

So what can you do? Based on code that is now in the internal.js file, the following examples are now available...

With selectBoxItemHook(), you can now write any code you want to run as soon as someone or some code selects an item in the select box. This applies to dropdowns and single-select items. Its very simple, but entirely critical, since this interface is not exposed to the external world. Now it is.

With gatherAllChoices() I show how you can use the method _gatherChoices(type) to collect values from a particular dropdown. Because you may have various data requirements, the type argument can be any delimiter, or "array" as text, or "json" as text. The output of selections will come in that format. The purpose of gatherAllChoices() is to show that you can create one place where all dropdowns on the screen are collected (say, as part of a form).

When you call externalClick, a new event on the dropdown, it will cause the dropdown to make a selection for you but it won't cause the dropdown to open and close, which it would do, thinking that a user was touching it. Its actually an important addition if you think about it. This way you can make programmatic calls using selectBoxItemChooser(), another demo. selectBoxItemChooser is an example of code you might write that will select items for you based on another component. (The example here is a month button on a calendar that when pressed, triggers selects the next month in the dropdown for the user).

This is just the start of the use cases, and it is small, but the changes i made to the codebase are powerful and should enable you to really take these to the next step. See the updated sections in the (Help Guide) for more information.