This will continue the selectable interaction refactor work started on Selectable
Demo
http://view.jqueryui.com/grid/grid-editing/grid-selectable.html
Uses the selectable interaction to allow for mouse/lasso selection of grid rows, setting a boolean selected field on each through tmplItem. In the grid refresh, if selected, TR gets the same class, 'ui-selected'. The behavior between pages is a bit inconsistent as clicking on a single row on one page will clear other selected rows on the same page, however any selections not currently visible will remain.
Selection Patterns
definitions (anchor, focus and range from https://developer.mozilla.org/en/DOM/Selection )
* single selection: at most one item in the set can be selected
* multiple selection: more than one item in the set can be selected
* independent toggle: each item selection in the set toggles independent of others
* dependent toggle: each item selection in the set clears previous selection in same set
* modifier key, ctrl (Win) / command (Mac): switches dependent toggle to independent toggle when ON
* shift key: activates a range selection when ON
* anchor: The anchor of a selection is the beginning point of the selection. When making a selection with a mouse, the anchor is where in the document the mouse button is initially pressed. As the user changes the selection using the mouse or the keyboard, the anchor does not move.
* focus: The focus of a selection is the end point of the selection. When making a selection with a mouse, the focus is where in the document the mouse button is released. As the user changes the selection using the mouse or the keyboard, the focus is the end of the selection that moves.
* range: A range is a contiguous part of a document.
Checkboxes
- multiple selection
- independent toggle
Radio buttons
- single selection
- dependent toggle
Select box
- single selection
- dependent toggle
Select box with multiple, modifier key OFF
- single selection
- dependent toggle
Select box with multiple, modifier key ON
- multiple selection
- independent toggle
Mouse click
- TODO with and without modifier and shift
Mouse lasso, modifier OFF
- selects all elements that intersect with a rectangle drawn by opposite corners at anchor and focus
- multiple selection
- dependent toggle
Mouse lasso, modifier key ON
- multiple selection
- independent toggle
Mouse range
- selects all elements between anchor and focus
Keyboard arrows
- TODO
Keyboard arrows with shift key
- TODO
Keyboard arrows with modifier key
- TODO
Keyboard arrows with shift and modifier keys
- TODO
Keyboard arrows with mouse (and shift and modifier keys)
- TODO
Patterns in the wild
- Gmail - inbox, selected messages
- focus is shown by an arrow icon to the left of the focused row, focus is moved with j and k keys
- each row has a checkbox for selection toggle, click the checkbox to toggle selection on the item or use the x key
- Window Explorer
- Mac Finder
- (anti-pattern) in grid mode, has a weird snake that follows the keyboard arrow focus with neither lasso nor range
- iTunes
- Google Calendar
- Spreadsheet, cell selection
- mouse lasso
- keyboard arrows
- Spreadsheet, row selection
- Text editor (text selection)
- mouse range
- keyboard arrows
- Photo gallery
- mouse lasso
- keyboard arrows
- Data visualization
- others...
Comments (0)
You don't have permission to comment on this page.