Question

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

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

为了得到这个，我试图假设第一个ContentPane是一个自定义的CSS类，它将完成它。

当你看到我在这里写作时，我找不到办法做到这一点。

我在带有

的data-dojo-props中尝试了它

＆＃13;

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

＆＃13;

所以这没有用。我尝试添加它，就像我在一个简单的HTML元素中使用class =＆＃34; firstTab＆＃34;

＆＃13;

{{1}}

＆＃13;

两种方式都没有将我的课程添加到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，可能会覆盖您自己的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，就像＆＃34; dijit_layout_TabContainer_0_tablist_myID＆＃34;

如果TabContainer本身有ID，则可能不同。只需看一下生成的代码。

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

最后看起来像是：

＆＃13;

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

＆＃13;

domClass是dojo的一部分。使用它你只需要它＆＃34; dojo / dom-class＆＃34;

dijit / layout / ContentPane的自定义CSS类

2 个答案: