Tabs Dijit选项卡容器小部件图标

Tabs Dijit选项卡容器小部件图标,tabs,dojo,Tabs,Dojo,有人知道如何向TabContainer小部件添加图标吗?我选择了一个不宽容的例子: <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...

有人知道如何向TabContainer小部件添加图标吗?我选择了一个不宽容的例子:

<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>

Lorem ipsum和周围的人。。。
Lorem ipsum和全方位-秒。。。
Lorem ipsum和全方位-最后。。。
但是只有一个title属性可以设置选项卡的标题。如何添加标签

在帖子中,我找到了一个在标题中添加标签的解决方案:

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>
我实际上更深入地研究了这一点,我发现这一代码工作得很好:

但是LinkPane的href属性让我感到困惑。我不需要链接到另一个html文档。

请查看。通过定义
iconClass
,可以将图标添加到选项卡:

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

它只是告诉选项卡图标使用哪个CSS类。您不必使用Dojo的主题类,您可以在样式表中定义自己的类。请参见
dijit/icons
中的CSS文件


顺便说一句,TabContainer演示使用HTML5风格的属性(例如,
数据dojo类型
),而您使用的是旧的属性(
dojoType
)。它们都没问题,但根据我的经验,如果你把它们混在一起,可能会发生奇怪的事情,所以最好选择一种风格并始终如一地使用它。

只需在标题中插入HTML即可:)

var myTab=新内容窗格({
标题:“
”+Strtle, id:“myTabId”, 内容:新选项卡内容() }); tabsControl.addChild(myTab);
href是由于标签引起的。如果您改为使用?这是可行的,但是使用内容窗格的iconClass属性更好。
var myTab = new ContentPane({
  title: "<span class='icon-class'></span></br>" + strTitle,
  id: "myTabId",
  content: new TabContent()
});
tabsControl.addChild(myTab);