Example of Positioning the Ribbon Component from JSON

Application ribbon and its elements can be created and set up via JSON object defined in parameters of the Ribbon component constructor.

To execute the example, add links to the component library PP.js and visual style table PP.css to the HTML page. The root folder must contain a folder that contains images: img. In the BODY tag add a DIV element with the simple1 identifier.

//Handler of the Click event of launch button
function launchButtonClick()
{
   alert("Launch button");
}
//Main menu
var MainMenu = new PP.Ui.Menu();
MainMenu.addItem("Open");
var ribbon = new PP.Ui.Ribbon(
//JSON object with ribbon properties:
{
   MainButton: {
      Content: "report",
      Menu: MainMenu
   }, //Application button
   "Categories": //Array of tabs
   [
   {
      Id: "cat1",
      Caption: "Main",
      "Panels": //Array of tab panels
      [
      { //Launch button
         LaunchButton: {
            Click: launchButtonClick,
            Content: "Launch"
         },
         Id: "pan1",
         Caption: "Insert",
         "Elements": //Array of controls
         [
         {
            "PPType": "RibbonButton", //Class name without namespace.
            "IsLargeControl": "true", //Determine size of control (large or small)).
            Id: "but1",
            Content: "Paste",
            ImageUrl: "img/ribbon_img/paste.png"
         },
         {
            "PPType": "RibbonButton",
            "IsLargeControl": "false",
            Id: "but2",
            Content: "Copy",
            ImagePosition: "Left",
            ImageUrl: "img/ribbon_img/copy.png"
         }],
      }]
   }]
});
ribbon.addToNode(document.getElementById("simple1")); //Place ribbon
ribbon.setWidth(500); //Ribbon width

After executing the example the application ribbon that includes the Main tab is placed to the HTML page. The tab houses the Insert panel that contains two buttons with images: Paste (bigger)and Copy (smaller):

The bottom right corner of the panel houses the start button clicking which opens the message "Start Button".

Setting of ribbon elements can be changed from API:

ribbon.getCategoryById("cat1").setCaption("Insert"); //Change tab title
var buttton = new PP.Ui.RibbonButton(//Create new button
{
    Content: "Cut",
    ImageUrl: "samle_img/cut.png",
    ImagePosition: PP.LTRB.Left
}); 
ribbon.getPanelById("pan1").addControl(buttton, true); //Add a button
ribbon.getControlById("but1").setImagePosition(PP.LTRB.Bottom); //Change position of the Paste button image
ribbon.getItems()[0].getPanels()[0].getLaunchButton().dispose(); //Delete launch button

After the settings have been changed the component looks as follows:

See also:

Ribbon