Ribbonbar Web.UI

Installing and Initializing the Ribbonbar UI

Below is the code used to initialize the Ribbonbar UI on this page. Make sure you check the source code of this page and the help and manual page for the component to learn everything about it's amazing functonality.

Add Ribbonbar's Placeholder Element Where You Wish To Render It

<div id="acidjs-ribbonbar"><!-- / --></div>

Add Ribbonbar's Runtime Right Before the Closing Body Tag of The Page

<script src="Ribbonbar/Scripts/jQuery.js"></script>
<script src="Ribbonbar/Scripts/Ribbonbar.js"></script>
<script src="Ribbonbar/Scripts/Ribbonbar.Commands.js"></script>

Add the Initialization Code in a Script Tag After the Runtime Scripts

(function() {
    "use strict";

    // initialize ribbonbar
    window.ribbon = new AcidJs.Ribbonbar({
        runtime: "php", // optional, default is "php"
        rootFolder: "", // optional, default is ""
        skin: "Windows7" // optional, default is "Windows7"
    });

    // invoke the render method of the ribbonbar
    window.ribbon.render({
        tabs: ["home", "insert", "page-layout", "references", "mailings"],
        defaultSelectedTab: 0, // optional, default is 0 (first tab)
        width: 758,// optional, width in pixels. default is 100%
        onReady: function() { // fire a function when ribbonbar is rendered
            this.clickButtons(["align-left", "bold"]); // select some buttons by default
            window.logger.log("ribbonbar loaded and ready to use", "info");
        }
    });
})();