Skip to content

Instantly share code, notes, and snippets.

@volca
Created February 26, 2011 00:38
Show Gist options
  • Save volca/844781 to your computer and use it in GitHub Desktop.
Save volca/844781 to your computer and use it in GitHub Desktop.
phonegap nativeControls 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>
@Khushkedia
Copy link

Hi,

I tried the code, but i get an error sayin "cant find reference variable $ at file..."...Any suggestions??

@volca
Copy link
Author

volca commented Sep 16, 2011

The code is old, you should use phonegap-plugins's NativeControls. https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/NativeControls

@Khushkedia
Copy link

But i need it for the android phone.. Wil it work for android as well..

@volca
Copy link
Author

volca commented Sep 16, 2011

NativeControls plugin works for iphone only.

@Khushkedia
Copy link

Any idea what has to be done for it work on android?

@volca
Copy link
Author

volca commented Sep 16, 2011

Sorry, no idea

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment