Dojo Tab Container Widget

Fiddle exploring the dojo tab container widget.

by brady houseknecht

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<div id="container" class="claro">
    <!-- place dojo Hook here -->
    <div style="width: 350px; height: 290px">
        <div id="tc1-prog"></div>
    </div>
</div>

CSS

.dijitContentPane {
    color: #000000 !important;
}

JavaScript

require(["dijit/layout/TabContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"],

function (TabContainer, ContentPane) {
    var tc = new TabContainer({
        style: "height: 100%; width: 100%;"
    }, "tc1-prog");

    var cp1 = new ContentPane({
        title: "Food",
        content: "We offer amazing food"
    });
    tc.addChild(cp1);

    var cp2 = new ContentPane({
        title: "Drinks",
        content: "We are known for our drinks."
    });
    tc.addChild(cp2);

    tc.startup();
});