dijit/layout/ContentPane的自定義CSS類

我想添加一個自定義CSS類到dijit/layout/ContentPane，所以我可以自己設計它。dijit/layout/ContentPane的自定義CSS類

這是因爲我在我的ContentPanes所在的TabContainer中獲得了多個選項卡，並且我不想將邊框加倍。在選項卡周圍使用邊框將使邊框加倍，因此我刪除了選項卡的左邊框。在TabContainer的第一個選項卡中，我也需要左邊框。

爲了得到這個，我試着假設第一個ContentPane是一個自定義的CSS類，它將這樣做。

正如你看到我寫在這裏，我沒有找到一種方法來做到這一點。

我想它的數據道場道具內的

<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。

那麼它是如何完成的？

來源

2015-05-21 Keksdose

你有沒有檢查http://stackoverflow.com/questions/10636360/dojo-dijit-layout-tabcontainer-how-to-add-class-到標籤？ – connexo

它適用於Dojo 1.7我在這裏得到了1.10，所以在那裏使用的「pane2button」不再存在。 – Keksdose

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"); 
    }); 
});

來源

2015-05-21 07:25:40 g00glen00b

對不起，我的錯。我不夠具體。您的示例將一個類添加到「內容」中。我想添加一個類到TabContainer從ContentPane中生成的Tab本身。或者，如果你看我的例子，我的意思是文本「FunnyTitle」將出現的地方。 – Keksdose

就這麼簡單，我沒」沒有得到它。

您只需將ID添加到ContentPane。

道場產生爲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/dom-class」

來源

2015-05-21 11:48:24 Keksdose

我看到你在混合舊的和新的Dojo API代碼。 'domClass'實際上是Dojo 1.7+，但'dijit.byId（）'應該通過加載模塊'dijit/registry'並使用'registry.byId（）'來取代。 – g00glen00b

是的，沒錯。謝謝你的提示。順便說一句。我的回答並不完全正確。如果ContentPane位於對話框內，則會導致錯誤。所以如果發生這種情況，您還需要獲得ContentPane ID。在關閉對話框後，Dojo將爲tabcontainer創建另一個ID，而不更改編號。 – Keksdose

dijit/layout/ContentPane的自定義CSS類

回答

相關問題