Example of Creating the ToolBar Component

To execute the example, connect the PP.js components library and the PP.css visual styles table. Seebelow the Javascript code used to create the ToolBar component. The example requires the ui-icons_222222_256x240.png file that contains a collection of button icons.

<script type="text/javascript">

//Create the  ImageList component containing a set of button images

    var imageList = new PP.ImageList();

    imageList.setSource("ui-icons_222222_256x240.png");

    imageList.setIconHeight(16);

    imageList.setIconWidth(16);

//Create the ToolBar component

    var toolBar = new PP.Ui.ToolBar({

        ParentNode: document.getElementById("toolB"),

        ImageList: imageList,

    });

//A button with an image

    var imgbtn = new PP.Ui.ToolBarButton({

        Parent: toolBar,

        Content: "Cut",

        ToolTip: "Cut",

        ColumnIndex: 7,

        RowIndex: 6,

        IsFlat: true//Flat button

    });

//Regular button

    var simplebtn = new PP.Ui.ToolBarButton({

        Parent: toolBar,

        Content: "Copy",

        ToolTip: "Copy",

        IsFlat: false//Convex button

    });

//Separator

    var separator1 = new PP.Ui.ToolBarSeparator();

//Add buttons and a separator on the toolbar

    toolBar.addItem(imgbtn);

    toolBar.addItem(simplebtn);

    toolBar.insertItem(separator1, 1);

</script>

After executing the example, the HTML page will contain a toolbar with two buttons:

See also:

ToolBar