Digital Tab Container widget icons

Question

Does anyone know how to add an icon to a TabContainer widget? I chose the declerative example:

<div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;"> <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true"> Lorem ipsum and all around... </div> <div dojoType="dijit.layout.ContentPane" title="My second tab"> Lorem ipsum and all around - second... </div> <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true"> Lorem ipsum and all around - last... </div> </div> 

But there is only a title attribute for the tab title. How to add a tag?

In this post, I found a solution to add a tag to the header:

 I actually looked more into this and I found that this code works well: <div id="mainTabContainer" dojoType="TabContainer" style="width: 100%; height: 100%" selectedTab="tab1" > <a dojoType="LinkPane" href="/path/to/pane/content" refreshOnShow="true" style="display: none"><img src="path/to/your/image"/></a> 

But the href LinkPane attribute confused me. I do not need to reference another html document.

Answer 1

Take a look at the TabContainer demo. You can add icons to tabs by defining iconClass :

 <div id="tab3" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 3", iconClass:"dijitEditorIcon dijitEditorIconSave", closable:true'> 

It just tells the tab that the CSS class should use for the icon. You do not need to use Dojo theme classes; you can define your own classes in your stylesheet. See CSS Files in dijit/icons .

By the way, the TabContainer daemon uses HTML5 style attributes (e.g. data-dojo-type ), and you use the old ones ( dojoType ). Both of them are fine, but from my experience, if you mix them, strange things can happen, so it's better to choose one style and use it consistently.

Answer 2

just enter the HTML in your title :)

 var myTab = new ContentPane({ title: "<span class='icon-class'></span></br>" + strTitle, id: "myTabId", content: new TabContent() }); tabsControl.addChild(myTab);