How to create a header bar with buttons in Titanium JS?

时光怂恿深爱的人放手 提交于 2019-12-04 02:04:04

问题


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.

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.

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


回答1:


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:

<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",
},


来源:https://stackoverflow.com/questions/21945047/how-to-create-a-header-bar-with-buttons-in-titanium-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!