First, you need to include Sidebar's js/css files on a page. In order to use dhtmlxSidebar as a separate component, you need to include its source files on the page. There are two source files you should use:
<head>
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxsidebar.css">
<script src="codebase/dhtmlxsidebar.js"></script>
</head>
But if you're working with the whole DHTMLX Suite, there's no need to include extra files - dhtmlx js/css files will be enough:
<head>
<link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
<script src="codebase/dhtmlx.js"></script>
</head>
To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:
<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
type="text/javascript"></script>
By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:
<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
type="text/javascript"></script>
var mySidebar = new dhtmlXSideBar({
parent: "sidebarObj", // id/object, container for sidebar
skin: "dhx_skyblue", // string, sidebar skin, optional
template: "details", // string, used template, "details" by default
icons_path: "icons/", // string, path to the folder with icons
single_cell: true, // boolean, true to enable the single cell mode
bubble: 6, // number, marker to show number of notifications
width: 200, // number, width of the left part
header: true, // boolean, true to enable the header
autohide: false, // boolean, true to autohide the navigation bar
xml: "sidebar.xml", // string, path to xml config, optional
json: "sidebar.json", // string, path to json config, optional
onload: function(){}, // function, callback for xml/json, optional
items: [
// items config
{
id: "a1", // item id
text: "Text", // item text
icon: "a1.png", // icon used for the item
selected: true // boolean, true to select an item
},
// separator config
{
id: "sep1", // separator id
type: "separator" // item type, mandatory
},
{...}, // other items, if any
{...}
]
});
The order of loading (if several params specified at a time) is: json, xml,items.
Generally, to create a full-screen sidebar on a page, use the code as in:
<html>
<head>
<style> /* important to set width/height to 100% for fullscreen init */
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script> var mySidebar;
function doOnLoad() {
mySidebar = new dhtmlXSideBar({
parent: document.body, // parent container
items: [...] // items and other config
});
}
</script>
</head>
<body onload="doOnLoad();">
</body>
</html>
It's also possible to set offsets for Sidebar in the full screen mode.
To initialize dhtmlxSidebar in an HTML element, do the following:
1) create an HTML element where the sidebar will be placed later, don't forget to specify width and height:
<div id="sidebarObj" style="position: relative; width: 400px; height: 300px;"></div>2) create a dhtmlXSideBar object and place it into the HTML object that you've just created:
var mySidebar = new dhtmlXSideBar({
parent: "sidebarObj", // id of parent container
... // other config
});
To create a sidebar in a window, do the following:
1) create a dhtmlXWindows object:
var dhxWins = new dhtmlXWindows();
var sidebarWin = dhxWins.createWindow("w1", 20, 20, 600, 400);
The following parameters are passed to dhxWins.createWindow():
2) call the attachSidebar() method to render sidebar in the window:
var mySidebar = new sidebarWin.attachSidebar({
// sidebar config
});
To create a new sidebar in a cell of a layout, do the following:
1) create a dhtmlXLayoutObject object:
var myLayout = new dhtmlXLayoutObject({
parent: "layoutObj",
pattern: "3L"
});
2) attach sidebar to a cell of layout by the attachSidebar() method:
var mySidebar = myLayout.cells("a").attachSidebar();
// or with more extended config
var mySidebar = myLayout.cells("a").attachSidebar({
// sidebar config
});
JSON structure is needed for json init. In this case Sidebar can load config and partially data from an external json file.
It is used for the following init:
var mySidebar = new dhtmlXSideBar({
parent: "sidebarObj",
json: "sidebar.json",
onload: function(){
console.log("JSON has been loaded and items are rendered. Ready to work.");
}
});
// or
var mySidebar = new dhtmlXSideBar("sidebarObj");
mySidebar.loadStruct("sidebar.json");
sidebar.json
{
items: [
{id: "recent", text: "Recent", icon: "recent.png", selected: true},
{type: "separator"},
{}, // more items, if any
{}
]
}
Related sample: Init from json
XML struct is needed for xml init. In this case sidebar can load config and partially data from an external xml file.
It is used for the following init:
var mySidebar = new dhtmlXSideBar({
parent: "sidebarObj",
xml: "sidebar.xml",
onload: function(){
console.log("XML has been loaded and items are rendered. Ready to work.");
}
});
// or
var mySidebar = new dhtmlXSideBar("sidebarObj");
mySidebar.loadStruct("sidebar.xml");
sidebar.xml
<?xml version="1.0" encoding="UTF-8"?>
<sidebar>
<item id="recent" text="Recent" icon="recent.png" selected="true"/>
<item type="separator"/>
... more items, if any
</sidebar>
<html>
<head>
<script>
var mySidebar;
function doOnLoad() {
mySidebar = new dhtmlXSideBar({
// config here
});
}
</script>
</head>
<body onload="doOnLoad();">
</body>
</html>