tabs - Dijit TabContainer 小部件图标

Question

有谁知道，如何向 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 文档。

Answer 1

看看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 )。它们都可以，但是根据我的经验，如果将它们混合使用，可能会发生奇怪的事情，因此最好选择一种样式并始终如一地使用它。