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/ribbon.js"></script>
        <link rel="stylesheet" href="../../codebase/ribbon.css">
    </head>
    <body>
        <div id="ribbon_container"></div>
        <script>
            // creating dhtmlxRibbon
            var ribbon = new dhx.Ribbon("ribbon_container");
</script> </body> </html>

Include source files

Create an HTML file and place full paths to CSS and JS files of dhtmlxRibbon into the header of the created HTML file. The files are:

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

The structure of the Ribbon package is the following:

  • sources - the source code files of the library; they are easy-to-read and are mostly intended for debugging;
  • codebase - the obfuscated code files of the library; they are much smaller and intended for use in production. Include these files in your apps when they are ready;
  • samples - the code samples;
  • docs - the full documentation of the component.

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 as a parameter the HTML object on the page that serves as the ribbon container.

var ribbon = new dhx.Ribbon("ribbon_container");

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.

Back to top