PP.Ui.IconListItem (settings);
settings. The JSON object with the values of the component properties.
The IconListItem constructor creates an instance of the IconListItem component.
To execute the example, connect links to the PP.js library and to the PP.css visual styles table on the HTML page. Create a list containing icons. The file named 1.png must be on one level with the HTML page where the list is located. The file contains the icons set that has the following view:
The link to the file and specified icon sizes are stored in parameters of the non-visual component ImageList.
Each icon is stored in a separate list item: that is, in the IconListItem component. That is why it is necessary to create five instances of the IconListItem component.
<script type="text/javascript">
//Create ImageList component
var imagelist2 = new PP.ImageList({
Source:"1.png",
IconHeight: 32,
IconWidth: 32});
var listbox2 = new PP.Ui.ListBox({//Create the ListBox component
ParentNode: document.getElementById("example2"),
ImageList: imagelist2,
Orientation: 1//Determines that list is horizontally oriented.
});
//Create the IconListItem components:
var ILI = new PP.Ui.IconListItem({
Selected: true,//The first component from the list is selected.
Content: "IconListItem 0"
});
var ILI1 = new PP.Ui.IconListItem({
Content: "IconListItem 1"
});
var ILI2 = new PP.Ui.IconListItem({
Content: "IconListItem 2"
});
var ILI3 = new PP.Ui.IconListItem({
Content: "IconListItem 3"
});
var ILI4 = new PP.Ui.IconListItem({
Content: "IconListItem 4"
});
//Add the created elements to the list:
listbox2.addItem(ILI);
listbox2.addItem(ILI1);
listbox2.addItem(ILI2);
listbox2.addItem(ILI3);
listbox2.addItem(ILI4);
//Determine the indexes of the rows and the columns where icons are contained and also the height and the width of the components:
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 list that has the following view is located on the HTML page:
Another version of code to place the list is described in description of the ListBox.Orientationproperty.
See also: