Skip to content
This repository has been archived by the owner on Oct 9, 2018. It is now read-only.

Image List

Jump to bottom
tneil edited this page May 29, 2012 · 31 revisions

Image List Image List

Creating an image list is really simple and begins with creating a <div> that has the attribute data-bb-type="image-list". Each item in the list is another <div> that has the attribute data-bb-type="item". Each item has an image (data-bb-img), a title (data-bb-title), accent text that floats in the top right (data-bb-accent-text), and a description which is the innerHTML of the <div>.

<div data-bb-type="screen">
    <div data-bb-type="image-list">
        <div data-bb-type="item" data-bb-img="icon1.png" data-bb-title="Title">Description</div>
        <div data-bb-type="item" data-bb-img="icon2.png" data-bb-title="Title" data-bb-accent-text="Accent Text">Description</div> 
        <div data-bb-type="item" data-bb-img="icon3.png" data-bb-title="Title">Description</div> 
    </div>
</div>

To add a click event to one of the line items, simply add an onclick event to the <div>

<div data-bb-type="item" onclick="alert('clicked')" data-bb-img="icon9.png" data-bb-title="Title">Description</div>

Image Sizes

  • BlackBerry 5 & 6 - 60 x 60 pixels
  • BlackBerry PlayBook & BlackBerry 7 - 70 x 70 pixels
  • BlackBerry PlayBook with BB10 styling - 64 x 64 pixels
  • BlackBerry 10 - 119 x 119 pixels

Headers

An image list can have both headers and line items. A header is declared by creating a <div> with a data-bb-type="header" attribute and the innerHTML contents of the <div> are displayed as the label of the header. Headers have their text centered by default. To left justify your header text add the data-bb-header-justify="left" or to right justify your text add the **data-bb-header-justify="right"**attribute to your image list.

For BlackBerry 10 you can also specify if you want your header to be a solid color, or the default gradient. To use solid headers simply add the data-bb-header-style="solid" attribute to your image list.

<div data-bb-type="image-list" data-bb-header-justify="left" data-bb-header-style="solid">
    <div data-bb-type="header">My Header</div>
    <div data-bb-type="item" data-bb-img="icon9.png" data-bb-title="Title">Description</div> 
</div>

Image Options and Effects

If you want a simple list without images you can set the data-bb-images="none" attribute on your image list

<div data-bb-type="image-list" data-bb-images="none">

</div>

You can also specify placeholder images that are used for when you don't have an image to represent the list item, or if the url to your list item is broken. This can be done by setting the data-bb-image-placeholder attribute with the path to your placeholder image

<div data-bb-type="screen">
    <div data-bb-type="image-list" data-bb-context="true">
        <div data-bb-type="item" data-bb-title="Title">No Image</div>
        <div data-bb-type="item" data-bb-img="/unreachable/image.png" data-bb-title="Title">Unreachable</div>
    </div>
</div>

Placeholder

On BlackBerry 10 you can also specify an image effect for how your images will show up in your list. This can be done by setting the data-bb-image-effect="fade" attribute for your image list. Each of the images will fade in once they have been loaded.

<div data-bb-type="image-list" data-bb-image-effect="fade">

</div>

Context Menu Integration

If you want to attach a BlackBerry 10 context menu to your image list you can add the data-bb-context="true" attribute. This will automatically hook up your image list to the press and hold context menu that you have declared for the screen. When the image list item is pressed and held for 667ms it will peek the screen's context menu passing the title and description of the list item along with a handle to the item element. See the Context Menu area for more details of interacting with the menu.

NOTE: The context menu integration with the image list only works on BlackBerry 10

Clone this wiki locally