Dijit TabContainer 小部件图标

Posted 2023-02-16

【中文标题】Dijit TabContainer 小部件图标

【英文标题】：Dijit TabContainer widget Icons

【发布时间】：2011-07-27 14:52:08

【问题描述】：

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

【问题讨论】：

href 是因为 标签。如果你使用 代替它可能会起作用？

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

【参考方案2】：

只需将 HTML 注入您的标题 :)

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

【讨论】：

这可行，但使用内容窗格的 iconClass 属性更好。