Skip to main content

Initialization

info

Download the DHTMLX Ribbon package as a part of the DHTMLX Suite library

To add DHTMLX Ribbon into an application, you need to take the following simple steps:

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with DHTMLX Ribbon</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 DHTMLX Ribbon
            const ribbon = new dhx.Ribbon("ribbon_container");
        </script>
    </body>
</html>

Include source files​

Unpack the downloaded package into a folder of your project.

After that, 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:

  • suite.js
  • suite.css
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create a container​

Add a container for the Ribbon and give it an id, e.g. "ribbon_container":

<div id="ribbon_container"></div>

Initialize Ribbon​

Initialize Ribbon with the dhx.Ribbon object constructor. The constructor takes two parameters:

  • the HTML object on the page that serves as the toolbar container
  • an object with configuration properties
const ribbon = new dhx.Ribbon("ribbon_container", {
    // config options
});

Configuration properties​

The detailed information on Ribbon configuration options can be found in the Ribbon API overview article.

Load data into Ribbon​

Detailed information on loading data into Ribbon is given in the article Data loading.

Example​