jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
168 lines (162 loc) • 7.41 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" />
<meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items."/>
<title id='Description'>Initialize the jqxListBox from Array</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
var source = [{
label: "Peppermint Hot Chocolate",
value: "Chocolate Beverage",
group: "Hot Chocolate"
}, {
label: "Salted Caramel Hot Chocolate",
value: "Chocolate Beverage",
group: "Hot Chocolate"
}, {
label: "White Hot Chocolate",
value: "Chocolate Beverage",
group: "Hot Chocolate"
}, {
label: "Caffe Americano",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Caffe Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Caffe Mocha",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Cappuccino",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Caramel Brulee Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Caramel Macchiato",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Peppermint Hot Chocolate",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Cinnamon Dolce Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Eggnog Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Espresso",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Espresso Con Panna",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Espresso Macchiato",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Flavored Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Gingerbread Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "White Chocolate Mocha",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Skinny Peppermint Mocha",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Skinny Flavored Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Pumpkin Spice Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Caffe Vanilla Frappuccino",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}, {
label: "Caffe Vanilla Frappuccino Light",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}, {
label: "Caramel Brulee Frappuccino",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}, {
label: "Caramel Brulee Frappuccino Light",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}, {
label: "Eggnog Frappuccino",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}, {
label: "Mocha Frappuccino",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}, {
label: "Tazo Green Tea Creme Frappuccino",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}]
// Create a jqxListBox
$("#jqxWidget").jqxListBox({ source: source, width: 300, height: 300});
// update events.
$("#jqxWidget").on('select', function (event) {
if (event.args) {
var item = event.args.item;
if (item) {
var valueelement = $("<div></div>");
valueelement.text("Value: " + item.value);
var labelelement = $("<div></div>");
labelelement.text("Label: " + item.label);
$("#selectionlog").children().remove();
$("#selectionlog").append(labelelement);
$("#selectionlog").append(valueelement);
}
}
});
});
</script>
<div id='jqxWidget'>
</div>
<div style="font-size: 13px; font-family: Verdana;" id="selectionlog">
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>