jQuery TagCloud Setup

Home >Shield UI Documentation >TagCloud >JavaScript >jQuery TagCloud Setup

The TagCloud widget allows you to represent a tree-like structure into a table view .
In order to properly render it on the page, you need to:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add an DIV element for which to initialize the TagCloud functionality.
3. Initialize the widget.

<!DOCTYPE html>
<html>
<head>
<title>Shield UI TagCloud Demo</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="tags" />

<script type="text/javascript">
    jQuery(function ($) {
        $("#tags").shieldTagCloud({
            title: "Shield UI Demos",
            dataSource: {
                remote: {
                    read: "/api/demo-stats"
                },
                schema: {
                    data: "components"
                }
            },
            textTemplate: "{name}",
            frequencyTemplate: "{demos}",
            hrefTemplate: "{url}"
        });
    });
</script>

</body>
</html>

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