Class: UWA.Controls.Input.Select

UWA/Controls/Input. UWA.Controls.Input.Select

new UWA.Controls.Input.Select(options)

Represents a select input. Inherits from Input.

Known issue: there is a bug on WebKit with subpixel rendering of display: table CSS. Thus, a strange one pixel column may appear if the input has a subpixel width (for example, 150.5px or a size in em). In order to prevent this, specify the width with a rounded pixel value. See http://jsfiddle.net/DBkfF/

Parameters
Name Type Description
options Object

Options hash or a option/value pair.

Properties
Name Type Argument Default Description
options String <optional>
 {}

Directly add some options to this instance. See Input.Select#putOptions.

Extends

Index

Members

Methods

Members

<protected> name

Properties:
Name Type Description
name String

The input name. Default: 'uwa-select'.

<protected> options

Properties:
Name Type Description
options Object

The default controls options

<protected> _hiddenInput

Properties:
Name Type Description
_hiddenInput Boolean

If the input element should be displayed or emulated with some generated DOM. Default: false.
Inherited From:

<protected> elements :Object

The current control elements.

Type
  • Object
Inherited From:

Methods

setValue(values) → {this}

Select some options based on their value.

Parameters
Name Type Description
values Array

values to select
Returns
Type
this

setSelection(indexes) → {this}

Select some options based on their indexes.

Parameters
Name Type Description
indexes Array

Indexes to select
Returns
Type
this

getSelection() → {Array}

Get the selected options indexes.

Returns

of integers.

Type
Array

<protected> _isMultiple() → {Boolean}

Get if this select box is multiple.

Returns
Type
Boolean

<protected> _isSingleLine() → {Boolean}

Get if this select box is singleLine.

Returns
Type
Boolean

<protected> _getOptions() → {Array}

Get the <option> elements

Returns

DOM elements

Type
Array

<protected> _getSelectedOptions() → {Array}

Get the selected <option> elements

Returns

DOM elements

Type
Array

<protected> _selectionHandler(event)

Handle the select event by clicking on an option.

Parameters
Name Type Description
event DOMEvent

the click event

putOptions(options, replace) → {this}

Change options of the input.

Example
var select = new UWA.Controls.Input.Select();

// Add two normal options
select.putOptions([{
   label: UWA.i18n('Foo'),
   value: 'foo'
}, {
   label: UWA.i18n('Bar'),
   value: 'bar'
}]);

// Remove the option with the value "foo"
select.putOptions([{
   value: 'foo'
}]);

// Add two new grouped options
select.putOptions([{
   label: UWA.i18n('Foo 1'),
   value: 'foo1',
   group: UWA.i18n('Foo')
}, {
   label: UWA.i18n('Foo 2'),
   value: 'foo2',
   group: UWA.i18n('Foo'),
   selected: `true`
}]);

select.inject(widget.body);
Parameters
Name Type Argument Description
options Array | Object

An array of objects or a single object describing options to put in this select. Each object should have those fields:

  • String label - Text displayed on the option
  • String value - Value of the option
  • Boolean selected - Wether the option should be selected
  • String optional group - A group label. All options with the same group label will be grouped under this label.
replace Boolean <optional>

Remove the existing options before adding the new ones.
Returns
Type
this

removeOptions(options)

Remove options from the input

Example
// Add two normal options
select.putOptions([{
   label: UWA.i18n('Foo'),
   value: 'foo'
}, {
   label: UWA.i18n('Bar'),
   value: 'bar'
}]);

// Remove the option 'foo'
select.removeOptions('foo');
// or
select.removeOptions({value: 'foo'});
// or
select.removeOptions([{value: 'foo'}]);
Parameters
Name Type Description
options Array | Object | String

An array or a single entry describing options to remove. The entry can be either an object with a value field, or a string representing the value option itself.

isDisabled() → {Boolean}

Get if this input is disabled

Returns
Type
Boolean
Inherited From:

setDisabled(y) → {this}

Set the input as disabled

Parameters
Name Type Argument Default Description
y Boolean <optional>
 true

If false, enable the input.
Returns
Type
this
Inherited From:

getContent() → {HTMLelement}

Returns control content.

Returns

Control container.

Type
HTMLelement
Inherited From:

getInputElement() → {HTMLelement}

Returns the native input element

Returns
Type
HTMLelement
Inherited From:

inject(element, where) → {this}

Inject control in the dom.

Parameters
Name Type Argument Description
element HTMLelement

Dom target
where String <optional>

Where to inject
Returns
Type
this
Inherited From:

remove() → {this}

Remove the control from the dom

Returns
Type
this
Inherited From:

getClassNames(suffixes) → {String}

Generate a CSS class name based on the class name property, its parent classes, and the options "className". It should be used internally (in the control).

Example
var Input = UWA.Controls.Abstract.extend({
   name: 'uwa-input',

   options: {
       className: '',
   },

   buildSkeleton: function () {
       this.elements.container = UWA.createElement('div', { 'class': this.getClassNames() });
       this.elements.content = UWA.createElement('div', { 'class': this.getClassNames('-content') });
   }
});

var Radio = Input.extend({
   name: 'uwa-inputradio'
});

new Radio({
    className: 'toto black'
});
// container will have the class 'toto black uwa-inputradio uwa-input'
// content will have the class 'toto black uwa-inputradio-content uwa-input-content'
Parameters
Name Type Description
suffixes String

All parameters should be strings, used as suffix to append to the UWA.Class names of the inheritance chain.
Returns

The generated CSS class name.

Type
String
Inherited From:

hide()

Hide control content.

Inherited From:

show()

Show control content.

Inherited From:

destroy()

Destroy the control elements and its children. Remove all events and remove the element from the dom. This control and its children should not be used after this.

Inherited From: