Data Attribute Reference
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.
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 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-signature | 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.
To create an activity indicator use the data-bb-type="activity-indicator" attribute.
| data-bb-size | small | medium | large |
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 |
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.
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 |
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 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.
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 |
Divs with the data-bb-type="round-panel" are styled as a control group
Control group headers are contained in a control group and have the data-bb-type="panel-header" attribute
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 |
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 |
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 |
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 |
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>
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. |
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.
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 |
Divs with the attribute data-bb-type="label-control-container" are styled as a control container for BlackBerry
Rows are created in the Label Control container by using divs with the data-bb-type="row" attribute.
Labels are used for a row by specifying a div with the data-bb-type="label" attribute.
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 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 separators contained in a Menu use the data-bb-type="menu-separator" attribute
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.
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.
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 |
Divs with data-bb-type="scroll-panel" are styled to scroll its contents
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 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 |