css - dijit/layout/ContentPane 的自定义 CSS 类

Question

我想将自定义 CSS 类添加到 dijit/layout/ContentPane，这样我就可以自己设置样式。

这是因为我的 ContentPanes 所在的 TabContainer 中有多个选项卡，我不想加倍边框。在选项卡周围使用边框将使边框加倍，因此我删除了选项卡的左边框。在 TabContainer 的第一个选项卡中，我也需要左边框。

为此，我尝试假设第一个 ContentPane 是一个自定义 CSS 类，它将执行此操作。

正如您看到我在这里写的那样，我没有找到执行此操作的方法。

我在 data-dojo-props 中尝试过

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

所以这没有用。我尝试像在带有 class="firstTab"的简单 HTML 元素中那样添加它

<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/TabContainer 中使用 dijit/layout/ContentPane 时，会添加很多额外的 CSS，可能会覆盖您自己的 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");
    });
});