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>

Upcoming Changes in v0.9.5

NOTE: These changes are in the "next" branch and will be included in the upcoming release of v0.9.5

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();