Object Constructor

var myRibbon = new dhtmlXRibbon(data);

The Ribbon component can be initialized in two ways:

By placing directly on the page

var myRibbon = new dhtmlXRibbon(container, [configObj]);
//myRibbon.loadStruct(...);

By attaching to the layout (either to the whole layout or to a singular cell)

var myRibbon = layout.attachRibbon([configObj]);
//myRibbon.loadStruct(...);

Parameters:

container - an HTML container where the ribbon object will reside
configObj - a configuration object that specifies the structure of the ribbon

Layout, Window, Accordion, Tabbar can create ribbon inside their cells by using the method attachRibbon():

// attach to Layout
myLayout.attachRibbon();
myLayout.cells(id).attachRibbon();
// attach to Window
myWins.window(id).attachRibbon();
// attach to Accordion
myAcc.cells(id).attachRibbon();
// attach to Tabbar
myTabbar.tabs(id).attachRibbon();

Ribbon can also be initialized by object notation:

myRibbon = new dhtmlXRibbon({
    parent:"myRibbon",
    icons_path : "../../../samples_common/ribbon/",
    arrows_mode: "auto",
    onClick:function(){
        alert("Ribbon item was clicked");  
    }
});

Specifying Ribbon Items

Ribbon's items can be defined through "tabs" collection with "items" collections inside:

var myRibbon = new dhtmlXRibbon({
    parent : "rb",
    icons_path : "../../../samples_common/ribbon/",
    arrows_mode: "auto",
    tabs: [
        { //1st tab
            id: "tab_id",
            text: "Ribbon tab 1",
            items: []
        },
        { //2nd tab
            id: "tab_id2",
            text: "Ribbon_tab 2",
            items: [
                {type:"block", text:"Group 1", text_pos: "bottom", mode:"cols",
                list:[                                  //1st block
                    {type:"button", text:"New"},        //1st row, 1st item
                    {type:"button", text:"Open"},       //1st row, 2nd item
                    {type:"button", text:"Save"},       //1st row, 3rd item
                    {type:"newLevel"},                  //moves down into a new row
                    {type:"button", text:"Edit"},       //2nd row, 1st item
                ]},
                {type:"block", text:"Group 2", text_pos:"bottom", 
                list:[{  
                    //2nd block
                }]}
            ]    
        }       
    ]       
});