To add dhtmlxRibbon into an application, you need to take the following simple steps:
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxRibbon</title>
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
</head>
<body>
<div id="ribbon_container"></div>
<script> // creating dhtmlxRibbon
var ribbon = new dhx.Ribbon("ribbon_container");
</script>
</body>
</html>
Related sample: Ribbon. 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 Ribbon and give it an id, e.g. "ribbon_container":
<div id="ribbon_container"></div>
Initialize Ribbon with the dhx.Ribbon
object constructor. The constructor takes two parameters:
var ribbon = new dhx.Ribbon("ribbon_container", {
// config options
});
Related sample: Ribbon. Basic Initialization
css | adds style classes to Ribbon |
data | specifies an array of data objects to set into Ribbon |
menuCss | adds style classes to all containers of Ribbon controls with nested items |
There are two handy ways of loading data, i.e. a set of controls into Ribbon:
var ribbon = new dhx.Ribbon("ribbon_container");
ribbon.data.load("../common/dataset.json");
var data = [
{
type: "block",
items: [
{
value: "New",
icon: "dxi dxi-file-outline",
size: "small"
}
]
},
{
type: "block",
direction: "col",
items: [
{
value: "Add",
icon: "dxi dxi-plus",
size: "small"
},
{
value: "Remove",
icon: "dxi dxi-delete",
size: "small"
}
]
}
];
var ribbon = new dhx.Ribbon("ribbon_container", {css: "dhx_widget--bordered"});
ribbon.data.parse(data);
Detailed information on loading data into Ribbon is given in the article Data Loading.
Back to top