选项卡的Dojo参数

ngynwnxp  于 2023-08-01  发布在  Dojo
关注(0)|答案(1)|浏览(240)

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

字符串

9udxz4iz

9udxz4iz1#

我不是Dojo小部件方面的Maven,但我知道:
1.所有Dojo小部件构造函数都有签名:
var widget = new Widget(params,node);
1.发现参数的最好方法是查看源代码-不要害怕,它们将在相关类的开头记录为变量。
1.使用小部件的名称通常很容易找到相关文件,因为它们是通过路径命名的。
1.查找这些内容的最好方法是使用Dojo checkout 和您最喜欢的文本编辑器。但是the nightly checkout也可以工作(如果你遵循 Backbone.js 的话)。或者the Trac source browser
1.不要低估测试和演示的力量。
示例:dijit.layout.TabContainer ⇒ dijit/layout/TabContainer.js。如果文件丢失,请查看_base.js的层次结构目录,或一些类似的文件-后者可以将相关的类捆绑在一起。但在大多数情况下(如使用TabContainer),您会立即找到它。我们去看看吧。
在类的顶部有两个公开的参数:

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

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

  • doLayout -布尔值。如果为true,则更改当前显示的子项的大小以匹配我的大小。默认值:true。
  • persistent-布尔值。在会话中记住选定的子项。默认值: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>


回到你最初的问题:现在你可以看到width和height被简单地指定为样式,没有特殊的属性,没有什么花哨的东西,只是一些直观的CSS。因此,如果您想以编程方式执行此操作,只需在创建TabContainer的新示例之前在节点上设置它们。
是的,我希望API文档也能得到所有这些小细节,但整个设置是直观的,相关部分都记录在文件中。我们确实访问了源代码,但我们没有试图破译源代码,只是阅读类顶部的人类可读注解。

相关问题