Dojo/Dijit tabs with images

http://stackoverflow.com/questions/12688804/dojo-dijit-tabs-with-images

by alexrym

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<div id="mainTabs" data-dojo-type="dijit.layout.TabContainer">
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: 'Main'">
        <div id="btn" data-dojo-type="dijit.form.Button" data-dojo-props="label: 'Add'"></div>
    </div>        
</div>

CSS

#mainTabs {
    height: 500px;
    width: 500px;    
}

JavaScript

require([
    "dojo/ready",
    "dojo/on",
    "dijit/form/Button",
    "dijit/layout/TabContainer",
    "dijit/layout/ContentPane",
    "dojox/layout/ContentPane"
], function(ready, on, Button, TabContainer, ContentPane, ContentPaneX){
    ready(function(){
        var btn = dijit.byId("btn");
        var tc = dijit.byId("mainTabs");
        var idx = 0;
        on(btn, 'click', function(){
            var newItemPane = ContentPaneX({
                title:'Item ' + idx,
                closable: true,
                id:'item_tab_' + idx,
                iconClass: 'dijitIconUsers1'
            });
            idx++;
            
            tc.addChild(newItemPane);
            tc.selectChild(newItemPane);
        });
    });
});