• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Stop wasting time looking for files and revisions. Connect your Gmail, DriveDropbox, and Slack accounts and in less than 2 minutes, Dokkio will automatically organize all your file attachments. Learn more and claim your free account.

View
 

Grid-Selecting

Page history last edited by Jörn Zaefferer 8 years, 9 months ago

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
    • Grid
      • TODO 
    • List
      • TODO 
    • Details
      • TODO 
  • 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
    • mouse range
  • Spreadsheet, cell selection
    • mouse lasso
    • keyboard arrows
  • Spreadsheet, row selection
    • mouse range
  • Text editor (text selection)
    • mouse range
    • keyboard arrows
  • Photo gallery
    • mouse lasso
    • keyboard arrows
  • Data visualization
    • mouse lasso
    • mouse range
  • others... 

 

Comments (0)

You don't have permission to comment on this page.