如何在 Titanium JS 中创建带有按钮的标题栏? [英] How to create a header bar with buttons in Titanium JS?

问题描述

我正在使用 Titanium Alloy 来构建一个应用程序，我正在尝试创建一个带有按钮的标题栏，类似于联系人应用程序，如下图所示:

I'm using Titanium Alloy to build an app and I'm trying to create a header bar with buttons in it, similar to the contacts app, as pictured below:

这个标题在中间有标题，并有两个网站的按钮.

This header has the title in the middle and buttons either site.

我一直在到处寻找在 Titanium 中执行此操作的方法，但我还没有找到任何东西.文档中似乎没有这个，我需要创建完全自定义的内容吗?

I've been looking everywhere for a way to do this in Titanium but I can't find anything yet. It seems that this is not in the documentation, do I need to create something completely custom?

我试图在导航视图中添加一个按钮，但它不起作用 - 它出现一个错误，提示您导航视图的子元素必须是一个窗口.

I have tried to add a button inside a navigation view, but it doesn't work - it comes up with an error saying that you the child element of a navigation view has to be a window.

如果可能，我想使用 Alloy 来创建它.

If possible, I'd like to create this using Alloy.

推荐答案

创建视图非常容易.唯一的技巧是用 NavigationWindow 包装 Window ，因为它是您提到的错误建议.导航栏按钮是在控制器中创建和附加的.据我所知，您不能在 xml 文件中创建它们.但是，通过使用 $.UI.create() 方法，您可以确保所有类和样式也适用于它们.

That's pretty easy view to create. The only trick is to wrap Window with NavigationWindow as it was suggested in error you mentioned. NavBar buttons are created and attached in controller. As far as I remember, you can't create them in xml file. However by using $.UI.create() method you make sure that all classes and styles will apply to them, too.

index.html:

index.html:

<Alloy>
    <NavigationWindow>
        <Window title="Contacts" id="contacts">
            <SearchBar hintText="Search" />
            <TableView />
        </Window>
    </NavigationWindow>
</Alloy>

index.js:

$.contacts.leftNavButton = $.UI.create('Button', { title: 'Groups' });
$.contacts.rightNavButton = $.UI.create('Button', { systemButton: Ti.UI.iPhone.SystemButton.ADD });

$.index.open();

index.tss:

"Window": {
    backgroundColor: "white",
    layout: "vertical",
},

这篇关于如何在 Titanium JS 中创建带有按钮的标题栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！