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

问题描述

我正在使用钛合金来构建应用程序，并且试图创建一个带有按钮的标题栏，类似于通讯录应用程序，如下图所示:

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.

推荐答案

创建起来非常简单.唯一的窍门是将Window与NavigationWindow封装在一起，因为您提到的错误提示了这一点. NavBar按钮已创建并附加在控制器中.据我所知，您无法在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:

index.tss:

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

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