type: widget

release: 0.0

status: in planning

documentation: N/A

demo: N/A

 

 

---

 

1 - Description:

 

This widget provides a well-constrained way to let users build a list of items. Common applications include the Facebook-style list builder for message recipients (F6) which provides a textarea with an auto-complete function and the ability to re-order and delete recipients. The Apple Mail style builder (F7) adds an action menu next for each item that can be used to offering multiple actions. This should support re-ordering via drag and drop, plus keyboard shortcuts to select and delete items.

 

The autocompletion is optional, when enabled (default), it needs the Autocomplete as a dependency.

To disable: .listbilder({ autocomplete: false })

 

jQuery plug-ins:

http://plugins.jquery.com/project/facelist

http://www.emposha.com/javascript/jquerymultiselect.html

http://devthought.com/wp-content/projects/jquery/textboxlist/Demo/

 

Mark Gibson's plugin, built on jQuery UI. Can be used with Jorn's autocomplete (or others):

http://test3.internal.adaptavist.net/~mgibson/tokenlist/demo.html

 

Filament Group has a draft of the Facebook style interaction modeled here that uses progressive enhancement techniques on a textarea to ake it easy to get and set values:

<link...>

 

---

 

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.)

 

---