How to Start with Ribbon

New Ribbon Object Creation

To create a Ribbon object you must make 4 steps.

Shortly, they look as:

The steps that need to be taken for dhtmlxRibbon's initialization are the following:

Step 1.Including Related Files

Each DHTMLX component can be used standalone or as a part of the general library.

If you use dhtmlxRibbon standalone, you need to include 2 files:

dhtmlxribbon.js
dhtmlxribbon.css

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" href="../codebase/skins/dhtmlxribbon.css">
        <script src="../codebase/dhtmlxribbon.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

If you use dhtmlxRibbon as a part of "dhtmlxSuite" package, you need to include 2 files:

dhtmlx.js
dhtmlx.css

<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Including source files from CDN

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>

Step 2. Defining a Ribbon Container

The next step: an HTML container for your future ribbon. To implement this step we can choose one of the ways:

Create a new HTML container

 <div id="ribbonObj"></div>

In this example the object is a <div> element on page, which is placed in the <body> tag.

Put a ribbon into some DHTMLX container component: layout, window, accordion, tabbar.

// attach to Layout
dhxLayout.attachRibbon();
dhxLayout.cells(id).attachRibbon();
// attach to Window
dhxWins.window(id).attachRibbon();
// attach to Accordion
dhxAcc.cells(id).attachRibbon();
// attach to Tabbar
dhxTabbar.cells(id).attachRibbon();

Step 3. Creating Object Constructor

The next step is to create a new dhtmlXRibbonObject and place it after the <div> element (object) that we've created:

var myRibbon = new dhtmlXRibbon(baseId, skin);

"baseId" defines an HTML object on page to which the Ribbon is attached (the main Ribbon container in the code mentioned above).
"skin" is the optional parameter which defines the skin, that will be applied to the Ribbon. If this argument is not set, the component will be created with the default skin ("dhx_skyblue").

So, in our case the code will look like this:

var myRibbon = new dhtmlXRibbon("ribbonObj");

Ribbon object constructor is considered in detail in the article Object Constructor.

Step 4. Setting Image Path

The setIconPath() method should be used to set the full path to the directory, where ribbon image files are located. By means of this method the user is able to set path to the directory, where icons images are stored.

The following code string should be placed before any of data loading methods:

myRibbon.setIconsPath("[full path to icons image files directory]");