2008-11-28 42 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文档得到了所有这些小细节太多,但整个安装是直观的,以及相关的零部件都可以在文件中。我们确实去了源代码,但我们并没有尝试破译源代码,只是在课程顶部阅读了人类可读的评论。