Пользовательский класс CSS для dijit/layout/ContentPane

Question

Я хочу добавить пользовательский класс CSS в divjit/layout/ContentPane, чтобы я мог сам его стилизовать.

Это связано с тем, что у меня в TabContainer есть несколько вкладок, где расположены мои ContentPane, и я не хочу удваивать границы. Использование границы вокруг Tab будет удвоить границу, чтобы я удалил левую границу вкладок. На первой вкладке TabContainer мне нужна левая граница.

Для этого я попытался использовать первый ContentPane собственный CSS-класс, который это сделает.

Как вы видите, я пишу здесь, я не нашел способ сделать это.

Я попробовал его в дата-додзё-реквизита с

<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" data-dojo-props="class:'firstTab'">

Так это не работает. Я пытался добавить его, как я делаю это в простой HTML элемент с классом = «firstTab»

<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" class="firstTab">

Оба способа не добавить свой класс в ContentPane.

Так как это делается?

Answer 1

Свойство class на самом деле не используется для такого рода целей, но оно используется для идентификации типа виджета.

Однако атрибут class должен работать, потому что декларативные виджеты обычно сохраняют свои родительские атрибуты. Если у меня есть следующий HTML:

Это в конечном счете визуализируется в:

<div class="dijitContentPane test" data-dojo-type="dijit/layout/ContentPane" id="myContent" widgetid="myContent"> 
    Hello 
</div> 

Однако, обратите внимание, что при использовании dijit/layout/ContentPane Внутри dijit/layout/TabContainer много дополнительных CSS добавляется, possibily перекрывая свой собственный CSS.

Например, для подмены цвет фона вкладки внутри dijit/layout/TabContainer, я должен был использовать следующий селектор CSS:

.dijitTabContainerTop-dijitContentPane.test2 { 
    background-color: #D4D4D1; 
} 

Демо: http://jsfiddle.net/Lcog9saj/

Но также следует помнить, что границы генерируемые TabContainer, не применяются к самому ContentPane, а к элементу с именем класса .dijitTabContainerTop-container (часть самого TabContainer).

---

Если это действительно не работает, то вы всегда можете получить доступ к domNode свойству виджета, который вы пытаетесь изменить, например:

require(["dijit/registry", "dojo/ready", "dojo/dom-class"], function(registry, ready, domClass) { 
    ready(function() { 
     domClass.add(registry 
      .byId("myContentPane") 
      .get("domNode"), "test2"); 
    }); 
}); 

Answer 2

Это так просто, что я Жду» Получить его.

Все, что вам нужно сделать, это добавить идентификатор в ContentPane.

Доджо генерирует widgetID с ним, как «dijit_layout_TabContainer_0_tablist_myID»

Если сам TabContainer имеет идентификатор, он может быть различным. Просто взгляните на сгенерированный код.

Теперь вы можете получить его с помощью dijit.byId.

В конце концов, это выглядит примерно так:

var tab = dijit.byId("dijit_layout_TabContainer_0_tablist_myID"); 
 
domClass.add(tab.domNode,"myClassName");

domClass является частью додзё. Для его использования вам просто нужно потребовать его «dojo/dom-class»