Anchors;
The Anchors property determines position of the component placed within container.
The property returns an array of objects of the AnchorStyles type.
The property is relevant only for controls placed within the components that inherit from the PP.Ui.Container class.
To execute the example the HTML page must contain links to the PP.css, PP.js and jquery.js files. Add the Panel component that contains a pressed button on the page, create a border for the panel:
//Create the Panel component
var panel = new PP.Ui.Panel({
Width: 200,
Height: 200,
ParentNode: document.body
});
//Add a border for the panel
panel.addClass("newBorder");
$("div.newBorder").css("border", "1px solid blue");
//Create a button placed at the top right corner of the panel
but = new PP.Ui.ToolBarButton({
Content: "Button",
Anchors: ["Top", "Right"],
IsToggleButton: true
});
//Add a button to the panel
panel.add(but);
A panel that contains a button in the top right corner is placed in the page:
Resize the panel and change button position:
//Set a JSON object with panel sizes in the Tag property
but.getParent().setTag({
Width: 250,
Height: 250
});
//Set panel sizes
but.getParent().setSettings(but.getParent().getTag());
//return JSON object with button current position
flags = but.getAnchorFlags();
flags.Bottom = true;
flags.Top = false;
//Update button position
but.updatePosition();
After executing the example the panel looks as follows:
See also: