изменить цвет метки одной вкладки в серии вкладок в dijit layout tabcontainer - PullRequest
Новая
       37

изменить цвет метки одной вкладки в серии вкладок в dijit layout tabcontainer

0 голосов
/ 23 мая 2018

Я пытаюсь изменить цвет метки вкладки в dijit/layout/tabcontainer, чтобы отличить ее от других вкладок, но мне не повезло.

У меня есть этот HTML: 

<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'" id="tc" >
                <div data-dojo-type="dijit/layout/ContentPane" title="Start" id="Start" class="TabBackground"></div>
        <!--bunch more tabs here-->

                <div data-dojo-type="dijit/layout/ContentPane" title="Attachments" id="Attachments" class="TabProp1Fund"></div>

                <div data-dojo-type="dijit/layout/ContentPane" title="Finish" id="Finish" class="TabBackground"></div>
            </div>

Попытка css: 

.TabProp1Fund .dijitTab .tabLabel{  //saw this style when inspecting element
color:orange !important;
}

also tried:
.TabProp1Fund .tabLabel{
color:orange !important;
}

Попытка JavaScript: 

var TabAttachments = dojo.byId("Attachments");
                        TabAttachments.dijitTab.tabLabel.style.color="green";//dijitTab and tabLabel are undefined

Любые идеи, что япропал?Я бы предпочел изменить цвет вкладки, но я не знаю, есть ли свойство для этого?

Спасибо

1 Ответ

0 голосов
/ 24 мая 2018

Это потому, что класс не реплицируется в сгенерированных меню Tab, он остается только в div панели содержимого, но вы можете сделать это динамически, выполнив поиск (в состоянии готовности после загрузки dom), используя класс для вашей панели содержимого,получите его идентификатор и примените цвет, класс или что-либо другое к "tc_tablist_"+contentePaneID, чтобы применить его ко всей панели содержимого, имеющей указанный класс.(с использованием стиля dojo / dom)

См. ниже рабочий фрагмент:

Ниже я применил цвет непосредственно к dom, но лучше создать класс и добавить его, используя "dojo /дом-класс " domClass.add("someNode", "newClass");

require([
  "dojo/query",
  "dojo/on",
  "dojo/dom",
  "dojo/dom-style",
  "dojo/ready",
  "dijit/layout/TabContainer",
  "dijit/layout/ContentPane",
  "dojo/domReady!"
], function(query, On, dom, domStyle, ready, TabContainer, ContentPane) {
  ready(function() {
    query(".TabProp1Fund").forEach(function(element) {
      console.log(element.id)
      var textNode = dom.byId("tc_tablist_"+element.id);
      console.log(textNode)
      if (!textNode) return;
      domStyle.set(textNode, {
        color: "orange"
      });
    });
  });
});
<script>
  dojoConfig = {
    async: true,
    parseOnLoad: true
  }
</script>

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<div class="claro">
  <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'" id="tc">
    <div data-dojo-type="dijit/layout/ContentPane" title="Start" id="Start" class="TabBackground"></div>
    <!--bunch more tabs here-->

    <div data-dojo-type="dijit/layout/ContentPane" title="Attachments" id="Attachments" class="TabProp1Fund"></div>

    <div data-dojo-type="dijit/layout/ContentPane" title="Finish" id="Finish" class="TabBackground"></div>
  
  <div data-dojo-type="dijit/layout/ContentPane" title="Another orange" id="another" class="TabProp1Fund"></div>
 </div> 
</div>
...