Pill Buttons

Pill Buttons can provide a "Tab Like" interface for quickly switching between multiple views of data.

Pill Buttons are a <div> with a data-bb-type="pill-buttons" attribute. Each pill button is then added to the container by creating a <div> with a data-bb-type="pill-button" attribute. The caption the button is determined by the contents of the <div>. The bbUI tookit knows which button is first and last to create the rounded ends of the pill button UI. To handle the click of the button simply add an "onclick" handler.

To specify which button should be selected by default simply add the data-bb-selected="true" attribute to the default button.

    <div data-bb-type="screen">
        <div data-bb-type="pill-buttons">
            <div data-bb-type="pill-button" data-bb-selected="true" onclick="selectContact()">Contact</div>
            <div data-bb-type="pill-button" onclick="selectAddress()">Address</div>
            <div data-bb-type="pill-button" onclick="selectPhone()">Phone</div>
        </div>
    </div>

JavaScript Interface

When you want to dynamically show or hide your pill buttons you can call it's show() and hide() functions.

document.getElementById('myPillButtons').show();
document.getElementById('myPillButtons').hide();

As a convenience you can also remove your pill buttons from the screen by calling the remove() function.

document.getElementById('myPillButtons').remove();

To retrieve all the buttons contained inside the pill button container you can use the getButtons() function which will return an array filled with the buttons.

var buttons = document.getElementById('myPillButtons').getButtons();
alert('There are ' + buttons.length + ' buttons');