UI Selectables

UI Selectables

I committed the first version of UI Selectables. Check out the test page here:
<a href="http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html">http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html
</a>
It supports:
- custom filter (jQuery selector) for selectees (selectable children)
- mouse multi-select
- callbacks: select, unselect
In keeping consistent with naming and other UI/plugin APIs, the container is called a selectable (.ui-selectable). The child elements, which are what actually get selected, I've decided to call selectees (.ui-selectee). When they are selected they also get the class (.ui-selected). This should be a generally useful class for any UI plugin that wants to make use of selected elements.
Still to add:
- single-select option
- keyboard select
- meta-keys (shift, ctrl, etc) for mouse and keyboard multi-select/unselect
This will hopefully be a good base for other plugins like sortables and tree.
Known issues:
1) If you have two selectables, the helper from the first will select items in the second
2) No good way to easily theme the helper per selectable (hidden,
outline, background+border). Maybe provide a helperCss option?
3) Right now it's a little broken in that it uses mousemove to select/unselect the element instead of an intersect with helper, so a quick move of the mouse and you can skip an element (or 10 ;).
4) Items are not unselected as you shrink the helper.
3 and 4 will be fixed when I finish the work to provide two selection mode options I have planned:
- DOM range select
Selects all selectee elements in DOM order between drag start element and drag end element
000000
001111
111100
000000
- Helper box intersect select
Selects all selectee elements that are intersected by the helper box. The is a layout/position selection range, instead of a DOM range
000000
001100
001100
000000
Any thoughts on nice succinct names for this option and these two values? Something like
mode: 'dom' || 'box'
or perhaps rangeMode, selectMode, selectionMode?
Please test out what I've done so far, and let me know what your thoughts are, if I've missed anything in terms of API, callbacks, etc. Thanks.
- Richard