Skip to content
This repository

The bbUI framework uses HTML5 data- attributes to allow for markup-based initialization and configuration of controls. To avoid naming conflicts with other plugins or frameworks that also use data- attributes the bbUI controls use a data-bb- prefix.

Action Bar

Divs with data-bb-type="action-bar" are styled to look like BlackBerry 10 action bars

data-bb-back-caption Caption to be displayed for the action bar back button

Action Bar (Action)

Action divs must be nested inside an action bar and use the data-bb-type="action" attribute

data-bb-tab-style action | tab
data-bb-img Path to image to be used in the action item
data-bb-overflow false | true
data-bb-visible true | false
data-bb-pin false | true   NOTE: true is only supported for button actions
data-bb-accent-text Secondary text to show on an actionNOTE: this is only supported on tab actions for display in the tab overflow

The text used as the innerHTML of the action <div> will be used as the caption for the tab/button.

Activity Indicator

To create an activity indicator use the data-bb-type="activity-indicator" attribute.

data-bb-size small | medium | large

BBM Bubble

Divs with data-bb-typ="bbm-bubble" will be styled to look like a bubble in the BBM app. A BBM bubble can contain one or more items.

data-bb-style right | left

BBM Bubble (Item)

A BBM bubble conversation item must be contained in a BBM bubble and has the data-bb-type="item" attribute.

data-bb-img Path to image to be used for the item

The innerHTML of the item <div> is used as the text to show in the conversation item.

Button

Divs with data-bb-type="button" are styled to be BlackBerry looking buttons

data-bb-disabled false | true
data-bb-img Path to image to be used for the button

Context Menu

Divs with the data-bb-type="context-menu" will be styled as a BlackBerry 10 press-and-hold context menu. A context menu contains one or more actions

Context Menu (Action)

Context menu actions are contained in a context menu <div> and have the data-bb-type="action" attribute

data-bb-img Path to image to be used for the action
data-bb-pin false | true

The innerHTML of the action <div> is used as the text to show in the menu item.

DropDown

Dropdowns are created by simply adding a <select> element to the screen

data-bb-label Optional label text for a BlackBerry 10 Dropdown
data-bb-style stretch

For BlackBerry 10 you can also add a second line of text to the <option> being displayed when the dropdown is opened.

data-bb-accent-text Optional label text to appear on the second line of the option in the dropdown when open

Control Group

Divs with the data-bb-type="round-panel" are styled as a control group

Control Group (Header)

Control group headers are contained in a control group and have the data-bb-type="panel-header" attribute

File Input

Inputs of type="file" are styled in BlackBerry 10 to appear as a standard BlackBerry 10 button. You can customize the caption of the file input button using the following attribute

data-bb-caption Caption of File button

Grid List

Divs with data-bb-type="grid-layout" are styled to be a BlackBerry 10 image grid

data-bb-style landscape | square
data-bb-context false | true
data-bb-header-justify center | left | right
data-bb-header-style default | solid

Grid List (Group)

A grid list group must be contained in a grid list control and has the data-bb-type="group" attribute. A group can contain one or more rows.

data-bb-title Optional text to use as a caption in the group heading

Grid List (Row)

A grid list row must be contained in a grid list group and has the data-bb-type="row" attribute. A row contains one or more items

data-bb-columns Optional numeric attribute specifying the number of desired columns for the row

Grid List (Item)

A grid list item must be contained in a grid list row and has the data-bb-type="item" attribute.

data-bb-img Path of image to display
data-bb-title Title text to display on image

Sub-title text for the image is contained as the innerHTML of the <div>

Image List

Divs that use the data-bb-type="image-list" attribute will be styled as a BlackBerry image list

data-bb-context false | true
data-bb-images display | none
data-bb-image-placeholder Path of image to display
data-bb-image-effect none | fade
data-bb-header-justify center | left | right
data-bb-header-style default | solid   NOTE: solid is only supported for BlackBerry 10 and PlayBook.
data-bb-style default | arrowlist | arrowbuttons | addbuttons | removebuttons   NOTE: BB5/6/7 only supports default and arrowlist.

Image List (Header)

A header divider <div> is with the data-bb-type="header" is used to separate items in an image list. The contents of the header innerHTML is used as the display caption.

Image List (Item)

An Image List item is a <div> that represents a line item in a list using the attribute data-bb-type="item". This item is nested in an Image List.

data-bb-img Path of image to display
data-bb-title Title text to display on image
data-bb-accent-text Accent text to show with the item

Label/Control Container

Divs with the attribute data-bb-type="label-control-container" are styled as a control container for BlackBerry

Label/Control Container (Row)

Rows are created in the Label Control container by using divs with the data-bb-type="row" attribute.

Label/Control Container (Label)

Labels are used for a row by specifying a div with the data-bb-type="label" attribute.

Menu

Divs that use the data-bb-type="menu" attribute will be styled as a menu. Menus contain one or more menu items or separators

Menu (Item)

Menu items contained in a Menu use the data-bb-type="menu-item" attribute

data-bb-img Path to image to be used for the item
data-bb-selected false | true

Menu (Separator)

Menu separators contained in a Menu use the data-bb-type="menu-separator" attribute

Pill Buttons

Divs that use the data-bb-type="pill-buttons" will be styled as a BlackBerry pill button group. This group can contain one or more buttons.

Pill Buttons (Button)

Buttons in a pill button group have the data-bb-type="pill-button" attribute

data-bb-selected false | true

The innerHTML of the button <div> contains the caption of the button.

Screen

Divs with data-bb-type="screen" are styled to be a BlackBerry screen

data-bb-effect none | fade | slide-left | slide-right | slide-up | slide-down

Scroll Panel

Divs with data-bb-type="scroll-panel" are styled to scroll its contents

Title Bar

Title bar divs must be nested inside a screen div and use the data-bb-type="title" attribute.

data-bb-caption Caption to show in the title area
data-bb-back-caption Caption to show in the "back" button on PlayBook and BB10
data-bb-action-caption Caption to show in the second right hand button on BB10 styling
data-bb-img Image to show in the top right hand corner of the title with BB10 styling
data-bb-accent-text Second line of text to show under the title caption when using BB10 styling

Toggle Buttons

Toggle buttons are defined with the data-bb-type="toggle" attribute.

data-bb-checked false | true
data-bb-on Caption to show in the toggle "on" position
data-bb-off Caption to show in the toggle "off" position
data-bb-disabled false | true
Something went wrong with that request. Please try again.