dijit/layout/ContentPane 的自定义 CSS 类

Question

我想向 dijit/layout/ContentPane 添加一个自定义 CSS 类，以便我可以自己设置样式。

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

为了做到这一点，我试图假设第一个 ContentPane 是一个自定义 CSS 类，它会做到这一点。

正如你看到我在这里写的那样，我没有找到办法。

我在 data-dojo-props 中尝试过

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

所以这不起作用。我尝试添加它，就像我在一个简单的 HTML 元素中一样，使用 class="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/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");
    });
});

Answer 2

就这么简单，我没看懂。

您需要做的就是向 ContentPane 添加一个 ID。

Dojo 使用它生成一个 widgetID，例如“dijit_layout_TabContainer_0_tablist_myID”

如果 TabContainer 本身有一个 ID，它可能会有所不同。看看生成的代码就行了。

现在您可以使用 dijit.byId 获取它。

最后它看起来像：

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

domClass 是dojo 的一部分。要使用它，您只需要要求它“dojo/dom-class”