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

  • Finally, you can manage your Google Docs, uploads, and email attachments (plus Dropbox and Slack files) in one convenient place. Claim a free account, and in less than 2 minutes, Dokkio (from the makers of PBworks) can automatically organize your content for you.

View
 

Multiselect

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

 

type: widget

release: 0.0

priority: low

status: in development

documentation: url || N/A

demo: http://quasipartikel.at/multiselect_next/

 

 


 

1 - Description:

 

Selecting multiple items in a list may be tedious, unobvious and awkward (especially when choosing among a few hundred items) to most users. Moreover, even if items are sorted in a specific order, searching through the list is at the most an unattractive process. This is not mentionning downloading all the items when the user really want to find specific ones. In order to satisfy all these gaps, the original list should be replaced by a more friendly and intuitive equivalent in an unobstrubtive way.

 

The replacement widget should satisfy the following base features :

 

  1. Support all native features (disabled items, option groups, etc.)
  2. Keybaord navigation aware
  3. Search capable
  4. Distinction between available and selected items with selection feedback (count vs. total)
  5. Intuitive mouse support (drag and drop)
  6. Selected element reordering
  7. Dynamic loading

 

Related plugins:


 

2 - Visual Design:

 

Base layout with search capabilities.

 


 

 

3 - Functional Specifications/Requirements:

 

The widget should follow options naming convention, and support bindable events. It should also natively support localization.

 


 

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 features and 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 (3)

fnagel said

at 1:54 pm on Jul 27, 2011

Why dont merge this widget with the Selectmenu? Its natively the same element and we should handle it together.
Jörn emailed me an nice concept: http://harvesthq.github.com/chosen/

Richard D. Worth said

at 2:40 pm on Jul 27, 2011

It's natively the same element but the interaction (and options and logic and events that go with it) is quite different. Spinner and Range/Slider widgets could both be called on an <input type="number"> but that doesn't mean they should be done together.

Scott González said

at 2:45 pm on Jun 6, 2012

It's actually not natively the same element. The fact that the element name is the same is irrelevant. <select multiple> is as bad as <input type>

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