如何以编程方式创建dojox.mobile.TabBar？

Question

我想创建一个分段控件类型的dojox.mobile.TabBar,就像本页顶部的那个:

http://download.dojotoolkit.org/release-1.6.0/dojo-release-1.6.0/dojox/mobile/tests/test_iPhone-TabBar.html

查看源代码,我可以看到如何以声明方式执行:

   <ul dojoType="dojox.mobile.TabBar" barType="segmentedControl">
   <li dojoType="dojox.mobile.TabBarButton" icon1="images/tab-icon-16.png" icon2="images/tab-icon-16h.png" moveTo="view1" selected="true">New</li>
   <li dojoType="dojox.mobile.TabBarButton" icon1="images/tab-icon-15.png" icon2="images/tab-icon-15h.png" moveTo="view2">What's Hot</li>
    <li dojoType="dojox.mobile.TabBarButton" icon1="images/tab-icon-10.png" icon2="images/tab-icon-10h.png" moveTo="view3">Genius</li>
    </ul>

但我一直无法弄清楚如何以编程方式做同样的事情.TabBar是Dojo 1.6中的新功能,但在http://dojotoolkit.org/api/1.6/dojox/mobile/TabBar的文档中有介绍

但是我的新手自己仍然无能为力,如何以编程方式创建TabBarButtons并将它们与TabBar相关联.我可以在网上找到多个示例,说明如何以声明方式进行,但不能以编程方式进行.

任何人都知道任何程序化的例子,或者可以在这里提供一个？

Answer 1

要在您的问题中以声明方式存档创建窗口小部件的相同结果,您可以使用以下JavaScript代码以编程方式创建它们.

var tabBar = new dojox.mobile.TabBar({barType : "segmentedControl"}, node1);
var button1 = new dojox.mobile.TabBarButton({icon1 : "", icon2 : ""}, node2);
var button2 = ...;
var button3 = ...;
tabBar.addChild(button1);
tabBar.addChild(button2);
tabBar.startup();

因此,从声明性创建转换为编程创建的规则可以很简单.使用new创建的dijit类的新实例,并提供两个参数.第一个参数是JavaScript对象,包含用于启动窗口小部件的属性,取自声明性语法中的DOM属性.第二个参数是与窗口小部件关联的DOM节点.

窗口dojox.mobile.TabBar小部件是可以包含其他窗口小部件的容器窗口小部件.这些小部件继承dijit._Container并可以使用addChild函数来添加子小部件.

不要忘记使用startup启动容器小部件.此函数告诉容器您已完成容器及其子容器的工作.容器小部件通常在startup函数中执行一些调整大小的工作.在startup以声明方式创建时会自动调用.