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
picker.open(); Open the picker
picker.setValue(int); Define the option at the specified position as the picker value


Events

Method Description
onchange When the value is changed
onchange(DOMElement element, Object instance, string value, number valueIndex) => 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