jQuery ListBox Getting Started

Home >Shield UI Documentation >ListBox >JavaScript >jQuery ListBox Getting Started

The ListBox widget allows you to display a list of items. The underling element from which the widget can be created is div. In order to render the ListBox JavaScript widget on a webpage, you need to:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add an element for which to initialize the ListBox functionality.
3. Initialize the widget.

<!DOCTYPE html>
<html>
<head>
<title>ShieldUI ListBox</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>
</head>
<body>
<div id="listbox"></div>

<script type="text/javascript">
    $(function () {
        $("#listbox").shieldListBox({
            dataSource: {
                data: countries
            },
            textTemplate: "{name}"
        });
    });
</script>
</body>
</html>

To see an example of the control in action, along with all the required code, please refer to the following example.