【问题标题】:Dojo Parameters for Tabs选项卡的 Dojo 参数
【发布时间】:2008-11-28 15:36:21
【问题描述】:

我在使用 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>

【问题讨论】:

    标签: javascript api dojo


    【解决方案1】:

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

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

      var widget = new Widget(params, node);

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

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

    4. 查找这些内容的最佳方法是使用 Dojo 结帐和您最喜欢的文本编辑器。但是the nightly checkout 也可以(如果您跟随主干)。或the Trac source browser

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

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

    类的顶部有两个公开的文档化参数:

    • tabPosition — 字符串。定义选项卡相对于选项卡内容的位置。 “顶部”、“底部”、“左-h”、“右-h”。默认值:“顶部”。
    • tabStrip — 布尔值。定义 tablist 是否获得额外的布局类。默认值:false。
    • _controllerWidget - 忽略它,没有公共参数以下划线开头 - 这是指定受保护成员的常见 JavaScript 约定。

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

    • doLayout — 布尔值。如果为真,请更改我当前显示的孩子的大小以匹配我的大小。默认值:true。
    • persist — 布尔值。跨会话记住选定的孩子。默认值: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>
    

    回到你原来的问题:现在你可以看到宽度和高度被简单地指定为样式,没有特殊属性,没有什么花哨的,只是一些直观的 C​​SS。因此,如果您想以编程方式执行此操作,只需在创建 TabContainer 的新实例之前将它们设置在节点上即可。

    是的,我希望 API 文档也包含所有这些小细节,但是整个设置很直观,并且相关部分都记录在文件中。我们确实去了源代码,但我们没有尝试破译源代码,只是阅读了类顶部的人类可读的 cmets。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-12-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多