To remove the jQuery requirement, and still bind the deviceready event, you just need to call :

document.addEventListener("deviceready",setupToolbars);

Nice work!

I can't find the phone gap 0.9.0
Could you give the files link to try your code?

Thanks in advance

For Phone Gap 0.9.0 go to the version of your phone in http://github.com/phonegap then click on the "download source" at the top right button.
For example, for the iphone it's: http://github.com/phonegap/phonegap-iphone
That's because 0.9.0 right now (as I write this) is the newest version.

If you remove the ToolBar the tabs push down below the bottom of the screen. Is there css or code to positions these elements?

For those having problems with the TabBar being pushed down below the screen (this happens when the toolbar is NOT present). I used Samuels comment for the fix:
http://phonegap.lighthouseapp.com/projects/20116/tickets/24-uicontrols-edge-tabbar-with-wrong-size#ticket-24-16
It's a little hacky but it works for now.

Any ideas on how to get custom icons working? icon.png doesn't seem to show up. I've tried putting pngs in the "www" folder and just in the project folder.. no dice. Any suggestions would be extremely helpful.

For all the web refugees like me... who are very new to this... To make the change above. You need find #yourprojectname#.xcodeproj (found in the root of your project). "right" click on that file and "open with finder". A new project should open in X-code. Expand plugins and open UIControls.m make above change. Click on build (menu item) and click build. Close this project and click build and go... you should be good to go!

The code for the tool bar works great, but when I return to the page that I put the javascript, it adds another tabbar on top of the one that is already there. Can anyone help me out with this. Maybe I am putting the code in the wrong place?

In my Phonegap version 0.9.0 UIcontrols.m was not in #yourprojectname#.xcodeproj but in PhoneGapLib.xcodeproj.

That's where I also found the files mentioned in http://groups.google.com/group/phonegap/msg/da20bf729378be30 . That fix fixes the huge blank area when in landscape mode.

When I use this code the only thing I see is a white text "The tabBar is kwel" in the middle of the screen -_-

NicolasG,

Just remove the line,

<script type="text/javascript" src="jquery.1.3.2.min.js"></script>

and replace lines

$(document).bind("deviceready", function() {
setupToolbars();
});

with

document.addEventListener("deviceready",setupToolbars);

If you want to have a custom icon, you have todo a few things. First you have to make it either 30x30 or 60x60 (Hi-res), it has to have a transparent background and the shape is pure white. No drop shadow etc.. Then you have to specify the FULL path to the image, if my image is in the main www directory then I supply it like this:

window.uicontrols.createTabBarItem("random", "Random", "/www/random.png");

I attached a sample .png file that I used.

I