2008-11-28 35 views
2

我在Dojo文檔中遇到問題(照常)。
在他們的TabContainer API上,他們將第二個參數列爲一個名爲「params」的對象,但他們從未說出實際可以放入這個params對象的內容。我可以指定寬度嗎?高度?我是否需要指定容器內的選項卡的div的id?標籤的Dojo參數

如果我想指定要由Dojo解析器解析的選項卡容器,那麼也沒有關於我將放入HTML的屬性的規範。我發現下面的例子可以讓你放置標題,選擇和可關閉選項。還有別的事嗎?

<div id="tabA1" dojoType="dijit.layout.ContentPane" title="First Tab" selected="true" closable="true"> 
     First Tab 
    </div> 
    <div id="tabA2" dojoType="dijit.layout.ContentPane" title="Second Tab" closable="true"> 
     Second Tab 
    </div> 
    <div id="tabA3" dojoType="dijit.layout.ContentPane" title="Third Tab" closable="true"> 
     Third Tab 
    </div> 
</div> 

回答

9

我不是Dojo小部件方面的專家,但是這是我所知道的:

  1. 所有Dojo小部件構造有特色:

    VAR部件=新的Widget(參數,可以節點);

  2. 發現params的最好方法是看源代碼—不要害怕,它們會在相關類的開始處記錄變量。

  3. 相關文件通常很容易找到使用小部件的名稱,因爲它們是按其路徑命名的。

  4. 查找這個東西的最好方法是使用你最喜歡的文本編輯器的Dojo結帳。但the nightly checkout也適用(如果你按照後備箱)。或the Trac source browser

  5. 不要低估看測試和演示的力量。

實施例:dijit.layout.TabContainer ⇒ dijit/layout/TabContainer.js。如果缺少該文件,請查看_base.js層次結構的目錄或一些類似的探測文件—,後者可以將相關的類捆綁在一起。但在大多數情況下(如使用TabContainer),您會立即找到它。我們去看看。

有在類的前兩名公共記錄參數:

  • tabPosition —字符串。定義選項卡相對於選項卡內容的位置。 「top」,「bottom」,「left-h」,「right-h」。默認:「頂部」。
  • tabStrip — bool。定義tablist是否獲得用於佈局的額外類。默認值:false。
  • _controllerWidget —只是忽略它,沒有公共參數以下劃線開頭—這是一個通用的JavaScript約定來指定受保護的成員。

但它並不全是。 TabContainer基於dijit.layout.StackContainer(只需查看dojo.declare()標題)。我們可以使用StackContainer的公共參數,以及:

  • 的doLayout —布爾。如果爲true,則更改當前顯示的孩子的尺寸以匹配我的尺寸。默認值:true。
  • 堅持—布爾。記住跨會話選定的孩子。默認值:false。

正如您所看到的,代碼和參數很好地記錄在案,但並不總是反映在API工具中。現在我們可以放心地創建標籤容器。

但是,讓我們先來看看它在行動。所有Dijit測試總是在dijit/tests。任何dijit.layout。*小部件將在dijit/tests/layout中進行測試。相關測試文件將被命名爲test_TabContainer.html,實際上我看到5個文件:

例如,我們將重新創建的test_TabContainer.html第一TabContainer的:

var tc = new dijit.layout.TabContainer(
    {persist: true, tabStrip: true}, "mainTabContainer"); 

或者我們可以像在測試在線:

<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" 
    persist="true" tabStrip="true" style="width: 100%; height: 20em;"> 
    ... 
</div> 

回到你原來的問題:現在你可以看到寬度和高度被簡單地定義爲樣式,沒有特殊的屬性,沒有什麼特別的,只是一些直觀的CSS。因此,如果您想以編程方式執行此操作,只需在創建TabContainer的新實例之前將它們設置在節點上即可。

是的,我希望API文檔得到了所有這些小細節太多,但整個安裝是直觀的,以及相關的零部件都可以在文件中。我們確實去了源代碼,但我們並沒有嘗試破譯源代碼,只是在課程頂部閱讀了人類可讀的評論。