UIControls are now officially dead as of 0.9.2 and will not be supported (it never really was officially part of the core). If you still want this functionality have a look at:http://github.com/phonegap/phonegap-plugins/tree/master/iPhone/NativeControls/ Please file any issues/feature requests via github there createTabBarItem reference:
window.uicontrols.createTabBarItem(name, label, image, options);
Name: Identity for manipulate on phonegap.
Label: Text with appear on tabbar
Images: Icon on tabbar
IPhone Default Images:
- tabButton:More
- tabButton:Favorites
- tabButton:Featured
- tabButton:TopRated
- tabButton:Recents
- tabButton:Contacts
- tabButton:History
- tabButton:Bookmarks
- tabButton:Search
- tabButton:Downloads
- tabButton:MostRecent
- tabButton:MostViewed
For others, insert your image in Project and use "image.png". For rules consult: http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
Options:
onSelect: execute script on select tabBarItem.
Example: onSelect: function() { showTab('#otherView'); }
Phonegap 0.90 was used with this example.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" src="jquery.1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).bind("deviceready", function() {
setupToolbars();
});
var toprated=0;
var recents=0;
var history=0;
function setupToolbars() {
window.uicontrols.createToolBar();
window.uicontrols.setToolBarTitle("A Title");
window.uicontrols.createTabBar();
var toprated = 0;
window.uicontrols.createTabBarItem("toprated", "Top Rated", "tabButton:TopRated", {
onSelect: function() {
navigator.notification.alert("Top Rated selected");
window.uicontrols.updateTabBarItem("toprated", { badge: ++toprated });
}
});
var recents = 0;
window.uicontrols.createTabBarItem("recents", "Recents", null, {
onSelect: function() {
navigator.notification.alert("Recents selected");
window.uicontrols.updateTabBarItem("recents", { badge: ++recents });
}
});
var history = 0;
window.uicontrols.createTabBarItem("history", "History", "icon.png", {
onSelect: function() {
navigator.notification.alert("History selected");
window.uicontrols.updateTabBarItem("history", { badge: ++history });
}
});
window.uicontrols.createTabBarItem("search", "Search", "tabButton:Search");
window.uicontrols.createTabBarItem("downloads", "Downloads", "tabButton:Downloads");
window.uicontrols.showTabBar();
window.uicontrols.showTabBarItems("toprated", "recents", "history");
}
</script>
</head>
<body id="stage" class="theme">
<div id="Page1">
<br><br><br>
<h1>The tab bar is kewl!</h1>
</div>
</body>
</html>
