behavior:select-checkmarks

Behavior of <select multiple> lists. In principle it can be applied to any DOM element.

Elements

These elements have behavior:select applied by default:

• <select size="2...N" multiple="checkmarks"></select>
• <select|list multiple="checkmarks"></select>

Model

Same as behavior:select.

Selected options are getting :checked state flag set therefore custom styling of selected state can be made using :checked pseudo-class in CSS:

select > option:checked { background-image: url(my-checkmark.png); }

behavior:select-checkmarks toggles :checked state of the option when user clicks on checkmark icon (foreground-image) of option element.

Attributes

This behavior knows about:

• size=integer - number of visible elements in the list. Note: height of the select element can be overriden by CSS.
• name="name" - standard attribute name - name of the input element on a form.
• novalue="text" - if select has no <option selected> initially it will have this text rendered.

Events

Other than standard set of events (mouse, keyboard, focus) behavior:select-checkmarks generates:

• SELECT_SELECTION_CHANGED event, generated when user changes selection of the select (click on one of options). Posted event.
• SELECT_SELECTION_CHANGING event, selection is about to change. Synchronous event.
• SELECT_STATE_CHANGED event, one of options have its :checked state changed by user.

Methods

N/A - behavior:select-checkmarks does not introduce any specific methods.

Value

array of values, read/write, list of checked options.

Selection change handling in script

raw onValueChanged handler

var btn = $(select#some);
btn.onValueChanged = function() { var v = this.value; ... }

on() subscription

var btn = $(select#some);
btn.on("change", function() { ... event handling code ... });
self.on("change", "select#some", function() { ... event handling code ... });

decorators.tis handler

include "decorators.tis";
@change @on "select#some" :: ... event handling code ...;