toFront(ctrl: PP.Ui.Control);
ctrl. Item which is brought to the front.
The toFront method brings the item to front.
To execute the example, HTML page must contain links to PP.js script file and to PP.css styles file in the <body> tag of the HTML document of the <div> item with the panel identifier and the example must be placed in the <script> tag. Add a panel with two buttons in the document:
function createPanel() { // Create a panel panel = new PP.Ui.Panel({ // Set parent item ParentNode: document.getElementById("panel"), // Set panel name Name: "Panel", // Set custom positioning of items IsAbsolutePositioning: false }); // Create buttons button1 = new PP.Ui.Button({ Content: "Button 1" }); button2 = new PP.Ui.Button({ Content: "Button 2" }); // Add buttons to the panel panel.beginUpdate(); panel.add(button1); panel.add(button2); panel.endUpdate(); }
As a result, the panel with two buttons is added to the document:
Check whether the Anchors could be used:
// Check whether the Anchors could be used if (panel.supportAnchors()) { console.log("The Anchors could be used"); } else { console.log("The Anchors could not be used"); }
As a result, information whether the Anchors could be used is displayed in the console:
Anchors could not be used
Get panel sizes:
// Get panel sizes console.log("Panel height: " + panel.getContentNode().clientHeight); console.log("Panel width: " + panel.getContentNode().clientWidth);
As a result, panel sizes are displayed in the console:
Panel height: 21
Panel width: 150
get the contents of the item which is in coordinates (10, 10):
// Get contents of the item which is in coordinates (10, 10) if (panel.getItemByPoint(10, 10) !== undefined) { console.log("Item contents: " + panel.getItemByPoint(10, 10).getContent()); } else { console.log("Items is absent"); }
As a result item contents or information about its absence is displayed in the console:
Item contents: Button 1
Set absolute positioning of panel items and bring the first button to the front:
// Set absolute positioning of items panel.setIsAbsolutePositioning(true); // Bring the first button to the front panel.toFront(button1);
As a result the first button will be brought to the front and the second to the back:
Send the first button to the back:
panel.toBack(button1);
As a result the first button will be sent to the back and the second one will be on the front:
See also: