I'm having trouble making the tab bar do what I want, probably because I don't understand how it's supposed to be used, and I'm hoping some of the more experienced folks here can help me understand. I don't (yet) own an iPhone or iPod Touch, so all I know about the UI comes from playing with Apple's iPhone Simulator and reading the iPhone Human Interface Guidelines... hence, I may be making some wrong assumptions about how things are supposed to work. :-)
First, let me describe the structure of my app. There are three top-level pages and about 30 secondary pages. The primary pages are:
main--the index, with <A HREF> links to the subsidiary pages
map--a page containing an imagemap, also with links to the subsidiary pages
extras--a single page with no links at present
secondary pages--contain detailed information on index items, and link to each other
Here's what I'd like to have:
A tab bar showing "Index", "Map", and "Extras" buttons. These would always be shown, and would always link to the three top-level pages. No tab would ever link to a secondary page.
Here's the behavior I get (see main-page code below):
Let's say I start at the Index page (the default when the app launches). I use an HTML link on that page to navigate to one of the secondary pages. But the tab bar icon of the index page I just left remains highlighted. That's problem number one, since I'm no longer looking at that page.
Clicking the Index tab does nothing--I remain on the secondary page. That's problem number two. I want that tab to take me back to the index page.
Now suppose I click on the Map tab. I go to that page--no problem there. But if I then click on the imagemap to link to a secondary page, I'm in the same situation: the Map tab's icon remains highlighted even though I'm no longer looking at the Map page, and clicking it does nothing.
And now I'm really stuck, because clicking the Index tab just gets me the secondary page I'd linked to from the Index page, and clicking the Map tab gets me the secondary page I'd linked to from the Map page. In short, I can no longer access the Index or Map pages from their tabs.
It's possible that my confusion arises from trying to get a behavior that tabs were not intended to provide. That is, maybe a tab is always supposed to correspond to the current page, so the inter-page linking I'm doing--and in particular, linking to secondary pages that have no associated tabs--is simply not something one should do with tabs.
The basic issue remains: I want to have three navigational elements--top or bottom of page, I'm not fussy--that always take me to the three primary pages, no matter what secondary page I may be viewing at the moment. If tabs aren't the way to do this, I'd welcome suggestions. :-) I like the way the tabs look, but I'm not married to them.
Andy Baird
Code (on main.htm page only):
<script type="text/javascript">
var tabController = new NKTabBarController();
tabController.setTabBarForPage("main.html","Index","index-icon2.png");
tabController.setTabBarForPage("map.html","Map","map-icon.png");
tabController.setTabBarForPage("extras.html","Extras","extras-icon.png");
</script>
