Dijit TabContainer Виджет Иконки - PullRequest
Новая
       12

Dijit TabContainer Виджет Иконки

5 голосов
/ 27 июля 2011

Кто-нибудь знает, как добавить значок в виджет 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, чтобы установить заголовок вкладки. Как я могу добавить тег?

В этой записи я нашел решение добавить тег к заголовку: 

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>

Но атрибут href LinkPane смутил меня. Мне не нужно ссылаться на другой HTML-документ.

Ответы [ 2 ]

9 голосов
/ 15 августа 2011

Взгляните на демоверсию TabContainer .Вы можете добавить значки на вкладки, определив iconClass: 

<div id="tab3" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 3",
iconClass:"dijitEditorIcon dijitEditorIconSave", closable:true'>

. Он просто сообщает вкладке, какой класс CSS использовать для значка.Вам не нужно использовать классы тем Dojo, вы можете определить свои собственные классы в своей таблице стилей.См. CSS-файлы в dijit/icons.

Кстати, демо TabContainer использует атрибуты в стиле HTML5 (например, data-dojo-type), а вы используете старые (dojoType).Они оба в порядке, но по моему опыту, если вы смешаете их, могут произойти странные вещи, поэтому лучше выбрать один стиль и использовать его последовательно.

1 голос
/ 31 октября 2013

просто вставьте HTML в ваш заголовок:) 

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