This is a guest post from Don Albrecht of AjaxBestiary.com. Be sure to visit his sites and check out his other works.
While most of the new features in the jQuery UI package are common across most AJAX frameworks and toolkits, the new Selectables stands out as a unique and potentially quite useful interface element.
How it works
Selectables use mouse & keyboard events to allow the selection of groups of items. Selection state is controlled by CSS classes and callbacks.
Basic Usage
$("#ContainerElt").selectable();
Creates a selectable out of the <li> elements inside the container element.
Advanced Usage
Other elements can be made selectable by using the “filter” option. “Filter” allows you to define a second query string to describe the selectable elements. All elements matching this query within the parent element will be made selectable.
State Changes
The only other option is the specification of callbacks. Selectables can fire callbacks while an element is being selected, when an element is selected, while an element is being unselected and when an element is unselected. As with other jQuery UI elements, these are all handled by callbacks defined in the options.
For Example:
$("#selectable2").selectable({
filter: "div",
selecting: function(ev, ui) {
$(ui.selecting).text('selecting');
},
selected: function(ev, ui) {
$(ui.selected).text('selected');
},
unselecting: function(ev, ui) {
$(ui.unselecting).text('unselecting');
},
unselected: function(ev, ui) {
$(ui.unselected).text('unselected');
}
});
A unique class is also applied to an element on selecting (ui-selecting), while selected (ui-selected) and while unselecting (ui-unselecting). A selectable container element has the class “ui-selectable” applied on creation.
Drawbacks
I recently attempted to use selectables in a proof of concept for an upcoming project. Unfortunately, it left quite a bit to be desired from an accessibility perpective. Users required VERY EXPLICIT instruction that they were to draw a box around the objects they wanted to select. It wasn’t possible to easily select non-contiguous items. The plugin needs to dramatically improve its keyboard handling as well.
All in all, I consider jQuery UI Selectables to be a powerful and potentially useful tool for future projects. Unfortunately, I personally will be waiting to see how it matures before deploying in any production sites.
Find it Online
View A Demo of Selectables in Action here:
http://interface.eyecon.ro/demos/select.html
View Examples & The Online Documentation here:
http://docs.jquery.com/UI/Selectables
Find More information on the jQuery UI library at http://ui.jquery.com.
About The Author
Don Albrecht is a Web Designer & AJAX developer based in Rochester NY. He specializes in the creation of applications grounded in User research and general accessibility. He usually hangs out at AjaxBestiary.com a blog dedicated to all things AJAX and the tools behind the creation of engaging and rich web experiences.
Hi
I use this library and its works very well.
but when I use it in a big list then the selection process will be very slow,
can you help me with this issue please?