2011-07-25 41 views
2

我想创建分段控制型的dojox.mobile.TabBar,就像一个在这个页面的顶部:如何以编程方式创建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是道场1.6新的,但在http://dojotoolkit.org/api/1.6/dojox/mobile/TabBar

覆盖在文档中,但我的新手自己是如何编程创建TabBarButtons并将它们与联想的TabBar仍然毫无头绪。我可以在Web上找到多个示例,说明如何以声明方式执行此操作,但不能以编程方式执行。

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

回答

5

要在您的问题中以声明方式存档创建窗口小部件的相同结果,可以使用以下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

+0

谢谢亚历克斯你摇滚! – dparizek