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:
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:
<!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:
To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:
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:
The next step: an HTML container for your future ribbon. To implement this step we can choose one of the ways:
In this example the object is a <div> element on page, which is placed in the <body> tag.
// 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();
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);
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.
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:
Back to top
myRibbon.setIconsPath("[full path to icons image files directory]");