Standard behavior of <select> with dropdown option lists.
These elements have behavior:select applied by default:
<select size="1"></select><select|dropdown></select>The behavior transforms select declaration:
<select> <option value="#ff0000" selected>Red</option> <option value="#00ff00">Green</option> <option value="#0000ff">Blue</option> </select>
into this
<select>
<caption>Red</caption>
<button />
<popup>
<option value="#ff0000" selected>Red</option>
<option value="#00ff00">Green</option>
<option value="#0000ff">Blue</option>
</popup>
</select>
These parts get default styling from master.css but can be re-styled by host document styles if needed.
This behavior knows about:
size=integer - number of visible elements in the dropdown 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. The novalue attribute makes this select nullable - if there is no option are selected then value of the element is undefined.editable - this attribute causes behavior:edit to be applied to the <caption> element making it editable.as="...type...", defines <option value> parsing rules, accepts following values:as="auto", default value, tries to parse option's value as integer, float, boolean or length value. If parsing fails it returns value as a string.as="integer", tries to parse option's value as integer. If parsing fails it returns value as a string.as="float", tries to parse option's value as float. If parsing fails it returns value as a string.as="numeric", tries to parse option's value as either integer or float. If parsing fails it returns value as a string.as="string", does not parse option's value. Returns value as a string.popup="external-popup-id", id of <popup|select> element containing list of <option>'s. Such external <popup|select> mode is usefull in situations when your design requires placement of <select>s inside repeatable sections (like +vlist for example). This will minimize processing time and memory consumption. Other than standard set of events (mouse, keyboard, focus) behavior:dropdown-select 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.Other than standard state flags like :hover, :active, :focus and so on the dropdown also manages:
:expanded - this flag is on when popup option list is shown.Note: commands are invoked by calling element.execCommand("cmd-name"[,params])
<option> inside the select it causes the option to be current; Other than standard properties of DOM elements the dropdown also supports:
options - reference to DOM element that holds <option> list, <popup> in this case.onValueChanged handlervar btn = $(select#some);
btn.onValueChanged = function() { var v = this.value; ... }
on() subscriptionvar btn = $(select#some);
btn.on("change", function() { ... event handling code ... });
self.on("change", "select#some", function() { ... event handling code ... });
include "decorators.tis"; @change @on "select#some" :: ... event handling code ...;