Skip to main content

Initialization

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

Include source files#

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
var ribbon = new dhx.Ribbon("ribbon_container", {    // config options});

Related sample: Ribbon. Basic Initialization

Configuration properties#

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

Load data into Ribbon#

There are two handy ways of loading data, i.e. a set of controls into Ribbon:

  • from an external file with the help of the load() method of tree collection:
var ribbon = new dhx.Ribbon("ribbon_container");ribbon.data.load("../common/dataset.json");
  • from a local source using the parse() method of tree collection:
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.