MultiCheckboxPicker

Page history last edited by Todd Parker 6 mos ago

ghtly 

type: widget

release: 0.0

priority: high || medium || low

status: in planning || in development || complete

documentation: url || N/A

demo: url || N/A

 


 

1 - Description:

 

For situations where there is a long list of checkboxes for a user to select (>20 items), it can become difficult for a user to keep track of which items have been chosen because they may be scrolled out of view. This widget starts with a simple list of checkboxes and through prgressive enhancement, adds the ability to:

  •  check all and uncheck all
  • sum the total number of options
  • sum the total number of checked options
  • display a list of the currently selected values with a remove link next to each which unchecks the item

 

This can be used as a flat list or a list grouped by accordians or a tree structure. For these hierarchical options, we can also provide a sum of the number checked within each section and a 'check all' link to make these easy to manage.

 

A mutli-select list picker was coded based on PE and a multi-select. It uses the CSS framework and has a lot of the features described here except it can't be used with a list of checkboxes in it's current form:

http://quasipartikel.at/multiselect_searchable/

 

Therefore the new version lives in a separate "searchable" branch at

Github. http://github.com/michael/multiselect/tree/searchable

 


 

2 - Visual Design:

 

 


 

 

3 - Functional Specifications/Requirements:

 

(Detailed descrition of how the script will be structured: defaults, options, architecture, extensibility, etc.)

 


 

4 - Markup & Style:

 

     4.1 Initial markup examples

 

     (Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )

 

     4.2 Recommended transformed HTML markup

 

     (The HTML markup structure and classes that will be used by the scripts in the enhanced version) 

 

     4.3 Accessibility recommendation

 

    (Detailed recommendations for ARIA, HTML markup, CSS and javascript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices) 

 

     4.4 CSS & Theme

 

    (Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.) 

 


 

5 - Latest version of plugin:

 

(Link to the latest version in the jQuery UI trunk here)

 


 

6 - Open issues being discussed

 

(Use this area to place things that we're hashing out like featuresand options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)

 


 

 

 

 

Comments (0)

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