Proto.IPS :: Unobtrusive in-place-select widget

Proto.IPS is a nice little widget which can be used for in place selection.

The idea is shamelessly stolen from gmail chat control (for setting user status) behavior.

This work is experimental so don't be too harsh on me.

There are known issues with CSS in IE6 and Safari 2 which I'm not sure how to get rid of, and any help would be greatly appreciated

Download v.0.1 (requires Prototype 1.6) and css file

I gladly accept any bug reports and suggestions.


(DOMElement|String) element
element to insert the control into
(Object) config
See the section above for all the configuration options

Config object (passed as a second parameter):

(Array) options
Array of options where each option is an object with text and className (optional) properties
called before options list is shown
called after options list is shown
beforeUpdate(String value)
called before element is updated. new value is passed as a first parameter
afterUpdate(String value)
called after element is updated. new value is passed as a first parameter
called right after instantiation


takes option object and inserts it into a list


  new Proto.IPS(element, {
    options: [
      {text: 'Available', className: 'on'},
      {text: 'Free for chat', className: 'on'},
      {text: 'Away', className: 'half'},
      {text: 'Lunch', className: 'half'},
      {text: 'Not available', className: 'off'},
      {text: 'Occupied', className: 'off'}
All callbacks are bounded to the actual instance. Here's what you might want to access:
original element which control is wrapped around
"down arrow" element which triggers options list toggling (ips_trigger className)
options list (ul element - ips_options className)
input field (ips_input className)
div which is wrapped around original element and is assigned an ips_wrapper className. This element holds all of the control structures (options list, input field, original element and arrow trigger)
array of options (with last added being on top)
ips_wrapper and ips_trigger are assigned over class when hovered with the mouse. You can use these to style the widget