ListBox.Orientation

Syntax

Orientation: PP.Orientation

Description

The Orientation property sets orientation of the ListBox component.

Comments

Value of the property are all values of the Orientation enumeration.

By default the PP.OrientationVertical value is set, that is the list is located vertically.

Example

To execute the example enable hyperlinks to the PP.js library and the PP.css visual styles tables on the HTML page. The file that contains the set of the icons with the 1.png name should be available. This file should be on the same level with the HTML page. Given below is the JavaScript code used to locate a horizontal list of icons on the page.

<script type="text/javascript">

    var imagelist2 = new PP.ImageList();//Create the list of icons.

    imagelist2.setSource("1.png");//Address of png file.

    imagelist2.setIconHeight(32);

    imagelist2.setIconWidth(32);

    var listbox2 = new PP.Ui.ListBox({//Create the ListBox component.

        ParentNode: document.getElementById("example2"),

        ImageList: imagelist2,//Set a list of icons for the ListBox component.

        Orientation: PP.Orientation.Horizontal//Set horizontal orientation.

    });

//Add the elements of the list that are the objects of the PP.IconListItem class:

    listbox2.addItem(new PP.Ui.IconListItem({ Content: "IconListItem 0" }));

    listbox2.addItem(new PP.Ui.IconListItem({ Content: "IconListItem 1" }));

    listbox2.addItem(new PP.Ui.IconListItem({ Content: "IconListItem 2" }));

    listbox2.addItem(new PP.Ui.IconListItem({ Content: "IconListItem 3" }));

    listbox2.addItem(new PP.Ui.IconListItem({ Content: "IconListItem 4" }));

//Set parameters for the elements of the listbox2 list:

    var a = listbox2.getItems();

    for (var i = 0; i < a.length; i++) {

         a[i].setColumnIndex(0);

         a[i].setRowIndex(i);

         a[i].setHeight(36);

         a[i].setWidth(a[i] instanceof PP.Ui.IconListItem ? 36 : 150);

    }

</script>

After executing the example the horizontal list that has the following view is located on the HTML page:

See also:

ListBox