tabs - Dijit TabContainer小部件图标

有谁知道如何向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>

但是只有一个title属性可以设置选项卡的标题。如何添加标签？

在this帖子中，我找到了一种向标题添加标签的解决方案:

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文档。

最佳答案

看看TabContainer demo。您可以通过定义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样式的属性(例如data-dojo-type)，而您使用的是旧属性(dojoType)。它们都可以，但是根据我的经验，如果将它们混合使用，可能会发生奇怪的事情，因此最好选择一种样式并始终使用它。

关于tabs - Dijit TabContainer小部件图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6846427/