Working with General Visual Components > Components > LayoutBox > Example of Creating the LayoutBox Component
To execute the example HTML page must contain links to PP.js script file and to PP.css style file, in the <body> tag of the HTML document of the <div> item with the layoutBox identifier. In the onload event of the <body> tag it is necessary to specify the call of the createLayoutBox() function. Add the table on the page and fill it with items:
var layoutBox; function createLayoutBox() { // Create timeline layoutBox = new PP.Ui.LayoutBox({ // Set parent item ParentNode: document.getElementById("layoutBox"), // Set sizes Width: 250, // Set horizontal orientation of the table Orientation: "Horizontal", }); // Add several buttons in the table layoutBox.insert(new PP.Ui.Button({ Content: "Button 1", Height: 21 }), 0); layoutBox.add(new PP.Ui.Button({ Content: "Button 2", Height: 21 })); layoutBox.add(new PP.Ui.Button({ Content: "Button 3", Height: 21 })); }
As a result of executing the example, get the table with three buttons placed horizontally:
Place table items vertically and remove the third button:
// Set vertical orientation layoutBox.setOrientation("Vertical"); // Remove the third button layoutBox.removeByIndex(2);
As a result, get the table with two buttons placed vertically:
See also:
