To add dhtmlxSidebar into an application, you need to take the following simple steps:
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxSidebar</title>
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
</head>
<body>
<div id="sidebar_container"></div>
<script> // creating dhtmlxSidebar
var sidebar = new dhx.Sidebar("sidebar_container");
</script>
</body>
</html>
Related sample: Sidebar. Basic Initialization
Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
Add a container for the Sidebar and give it an id, e.g. "sidebar_container":
<div id="sidebar_container"></div>
Initialize Sidebar with the dhx.Sidebar
object constructor. The constructor takes two parameters:
var sidebar = new dhx.Sidebar("sidebar_container",{
// config options
});
Related sample: Sidebar. Basic Initialization
collapsed | defines that a sidebar is initialized in the collapsed state |
css | adds style classes for the component |
data | specifies an array of data objects to set into Sidebar |
menuCss | adds style classes to all containers of Sidebar controls with nested items |
minWidth | sets the minimal width of a sidebar in the collapsed state, 69 by default |
width | sets the width of a sidebar, 200 by default |
There are two handy ways of loading data, i.e. a set of controls into Sidebar:
var sidebar = new dhx.Sidebar("sidebar_container");
sidebar.data.load("../common/dataset.json");
Related sample: Sidebar. Init Load
var data = [
{
"id": "dashboard",
"value": "Dashboard",
"icon": "mdi mdi-view-dashboard"
},
{
"id": "statistics",
"value": "Statistics",
"icon": "mdi mdi-chart-line"
},
{
"id": "reports",
"value": "Reports",
"icon": "mdi mdi-file-chart"
}
];
var sidebar = new dhx.Sidebar("sidebar_container", {css: "dhx_widget--border_right" });
sidebar.data.parse(data);
Detailed information on loading data into Sidebar is given in the article Data Loading.
Back to top