jQWidgets ListBox Test

by _stephan_

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<div id="myApp"></div>

CSS

body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
}

JavaScript

$('#myApp').append('<div id="jqxlistbox" />');
var source = [
    "Instant coffee",
    "Irish coffee",
    "Liqueur coffee"];
// Create a jqxListBox
$("#jqxlistbox").jqxListBox({
    source: source,
    width: '200px',
    height: '250px',
});

$("#jqxlistbox").on('select', function (event) {
    $('#myApp').append('<div>index='+event.args.index+', item='+event.args.item+'</div>');
    //$('#myApp').append('<div>index='+event.args.index+', label='+event.args.item.label+'</div>');
});

$("#jqxlistbox").jqxListBox('selectIndex', '1');