PhoneGap with bottom tab bar

[Kris Ziel]

Have any of you found a way to implement the PhoneGap functionality/
framework in an app with the tab bar? I so I would greatly appreciate
help implementing it in my app.

[rborn]

You can do this directly in html, only if you don't need some other
stuff

[Paul Prescod]

This is what I did in my experiments (not production quality yet):

CSS:

div.button_bar{
display: block;
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 412px;
width: 100%;
height: 50px;
min-height: 0px !important;
}

div.button_bar > img {
margin: 0;
padding: 0;
display: inline;
background-repeat: no-repeat;
background-position: center top;
position: relative;
}

HTML:

<div class="button_bar">
<img src="first_button.png" onclick="alert('foo')"
/><img src="second-button.png" onclick="alert('foo')"
/><img src="third-button.png" onclick="alert('foo')"
/><img src="fourth-button.png" onclick="alert('foo')" />
</div>

I did that weird stuff with the tags to avoid whitespace between them
(there are other ways to do that but...I was hacking)

Also my button graphics include the two-tone black background in them.
That's another thing I will do differently as my app evolves.

I would love to see this button bar stuff added to magic framework or
iUI or both.

You'll probably also want to turn off dragging on that bar.

* http://phonegap.pbwiki.com/Preventing-Scrolling-on-iPhone-Phonegap-Applications

That's what I figured out hacking over the weekend. If that isn't
enough to get you going, then I can clean up my project to remove
proprietary information and send it over. But like I said I took a
bunch of short-cuts.

[Kris Ziel]

The problem is that the tab bar in HTML also scrolls with the page. I
have tried to implement the tab bar directly into the MainWindow XIB
file to no avail.

[kazoomer]

I think you want to have a container div or stage div that takes up
the entire screen except your footer with an overflow:hidden on it.
Then do prevent default on the body.

And add your footer div below the container with a position:fixed

I hope this helps.

Rob Ellis
Phonegap.com
Nitobi.com
Git: silentrob