Star

JavaScript Picker

Quick reference

Considering the example below:

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<div id="picker"></div>

<script type='text/loader'>
  var picker = jSuites.picker(document.getElementById('picker'), {
    data: [ 'Verdana', 'Arial', 'Courier New' ],
    value: 1,
    content: 'format_size',
  })
</script>
</html>


Methods

Method Description
picker.getLabel(int); Return the option at the specified position
@param - element index
picker.open(); Open the picker
picker.close(); Closes the picker
picker.getValue(); Returns the index corresponding to the current selected element
picker.setValue(int); Define the option at the specified position as the picker value


Events

The order of the onchange methods has changed from 4.2.0

Method Description
onchange When the value is changed
onchange(DOMElement element, Object instance, String value, String value, Number selectIndex) => void
onclose When the picker is closed
onclose(DOMElement element, Object instance) => void
onopen When the picker is open
onopen(DOMElement element, Object instance) => void


Initialization options

Property Description
data: string[] The picker options.
value: int The position of the initial picker option.
content: string The html or material-design icon that should be in front of the picker.
width: number The picker width.
render: function How each option should be shown.
function(string option) => string