0

我想向 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'">

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

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

两种方式都没有将我的课程添加到 ContentPane。

那么它是如何完成的呢？

4

2 回答 2

2

该class属性实际上不是用于那种目的，而是用于识别小部件的类型。

但是，该class属性应该起作用，因为声明性小部件通常保留其父属性。如果我有以下 HTML：

它最终被渲染成：

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

但是，请注意，在使用dijit/layout/ContentPaneinside时dijit/layout/TabContainer会添加很多额外的 CSS，可能会覆盖您自己的 CSS。

例如，为了覆盖 a 中选项卡的背景颜色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");
    });
});
于 2015-05-21T07:25:40.580 回答
0

就这么简单，我没看懂。

您需要做的就是向 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”

于 2015-05-21T11:48:24.923 回答