Control.Anchors

Syntax

Anchors;

Description

The Anchors property determines position of the component placed within container.

Comments

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.

Example

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:

Control