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