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）。它们都很好，但根据我的经验，如果你混合它们，可能会发生奇怪的事情，所以最好选择一种风格并持续使用它。

Answer 2

只需将HTML注入标题：）

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

Dijit TabContainer小部件图标

2 个答案: