选项卡的Dojo参数

Question

我在使用Dojo文档时遇到了问题(像往常一样).
在他们的TabContainer API上,他们将第二个参数列为一个名为"params"的对象,但他们从不说明你可以在这个params对象中实际放入什么.我可以指定宽度吗？高度？我是否要指定我希望成为容器内标签的div的id？

如果我想指定要由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>

Answer 1

我不是Dojo小部件的专家,但这就是我所知道的:

1. 所有Dojo小部件构造函数都有签名:

   var widget = new Widget(params,node);

2. 发现参数的最佳方法是查看源代码 - 不要害怕,它们将在相关类的开头记录变量.

3. 使用窗口小部件的名称通常很容易找到相关文件,因为它们是按路径命名的.

4. 查找这些内容的最佳方法是使用您喜欢的文本编辑器进行Dojo结帐.但是夜间结账也是有效的(如果你跟着后备箱).或Trac源浏览器.

5. 不要低估查看测试和演示的能力.

示例:dijit.layout.TabContainer⇒dijit / layout/TabContainer.js.如果缺少该文件,请查看_base.js的层次结构目录或一些类似的声音文件 - 后者可以将相关的类捆绑在一起.但在大多数情况下(如使用TabContainer),您会立即找到它.我们去看吧.

在课程顶部有两个公开记录的参数:

• tabPosition - 字符串.定义选项卡相对于选项卡内容的位置."top","bottom","left-h","right-h".默认值:"top".
• tabStrip - bool.定义tablist是否为布局获取额外的类.默认值:false.
• _controllerWidget - 只是忽略它,没有公共参数以下划线开头 - 它是指定受保护成员的常见JavaScript约定.

但并非全部.TabContainer基于dijit.layout.StackContainer(只需查看dojo.declare()标头).我们也可以使用StackContainer的公共参数:

• doLayout - 布尔值.如果为true,请更改当前显示的子项的大小以匹配我的大小.默认值:true.
• persist - 布尔值.记住跨会话选定的孩子.默认值:false.

正如您所看到的,代码和参数很好地记录在案,但并不总是反映在API工具中.现在我们可以放心地创建选项卡容器了.

但让我们先看看它的实际行动.所有Dijit测试总是在dijit/tests中.任何dijit.layout.*小部件都将在dijit/tests/layout中进行测试.相关的测试文件将被命名为test_TabContainer.html,实际上我看到了5个文件:

• test_TabContainer.html.
• test_TabContainer_noLayout.html.
• test_TabContainer_prog.html.
• test_TabContainer_remote.html.
• test_TabContainerTitlePane.html.

例如,让我们重新创建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文档也能获得所有这些小细节,但整个设置非常直观,相关部分会直接记录在文件中.我们确实去了源代码,但是我们没有尝试破译源代码,只是在类的顶部阅读人类可读的注释.