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

发布于 2024-11-25 20:17:00 字数 1246 浏览 0 评论 0原文

我想创建一个分段控件类型的 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

但是我的新手仍然对如何以编程方式创建 TabBarButton 并将它们与 TabBar 关联一无所知。我可以在网络上找到多个示例，这些示例展示了如何以声明方式而不是以编程方式执行此操作。

有人知道任何程序示例，或者可以在这里提供一个吗？

原文

I want to create a dojox.mobile.TabBar of the segmented control type, like the one at the top of this page:

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

Looking at the source, I can see how to do it declaratively:

   <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>

But I have been unable to figure out how to do the same programatically.
TabBar is new in Dojo 1.6, but is covered in the documentation at http://dojotoolkit.org/api/1.6/dojox/mobile/TabBar

But my newbie self is still clueless as how to programatically create the TabBarButtons and associate them with a TabBar. I can find multiple examples on the web that show how to do it declaratively, but not programmatically.

Anyone know of any programmatic examples, or could supply one here?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柠檬 2024-12-02 20:17:00

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

To archive the same result of creating widgets declaratively in your question, you can use following JavaScript code to create them programatically.

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();

So the rules to convert from declaratively creation to programatically creation can be simple. Use new to create a new instance of the dijit class and supply two parameters. The first parameter is JavaScript object contains the properties to initiate the widget, taken from the DOM attributes in the declarative syntax. The second parameter is the DOM node associated with the widget.

Widgets like dojox.mobile.TabBar are container widgets that can contain other widgets. These widgets inherites from dijit._Container and can use addChild function to add child widgets.

Don't forget to use startup to start the container widget. This function tells the container that you have finished the work with the container and its children. Container widget normally does some resizing work in the startup function. The startup is called automatically when creating declaratively.

回复收藏 0 原文

~没有更多了~