Hi All,
I've been having issues with the BB10 JQuery theme. My issues are:
1. The overflow action menu (on the right) does not open up when clicked (this was working fine with the version before this latest version)
2. The overflow tab menu (on the left) is working when clicked. However, when the option in it is selected, the new action bar only replaces half way on the screen.
Not sure if i've missed something. Any help would be appreciated.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<script src="local:///chrome/webworks.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<link rel="stylesheet" href="BlackBerry-JQM-all.min.css" />
<script src="BlackBerry-JQM-all.min.js"></script>
</head>
<body>
<!-- main page -->
<div data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Title</h1>
</div>
<div data-role="content">
<p>Welcome!
</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="actionbar">
<div id="aboutus" data-role="tab" data-overflow="true">
<img src="images/about.png" alt="" />
<p>About Us</p>
</div>
<div id="instructions" data-role="tab" data-overflow="true">
<img src="images/instructions.png" alt="" />
<p>Instructions</p>
</div>
<div data-role="tab" id="searcher">
<form id="searchform" onsubmit="return submitQuery()">
<input name="q" placeholder="Search" type=search size="26" id="query-input" onfocus="inputFocus();"/>
</form>
</div>
<div data-role="action" id="settings" data-overflow="true">
<img src="images/settings.png" alt="" />
<p>Settings</p>
</div>
</div>
</div>
</div>
<!-- main page -->
<!-- settings page -->
<div data-role="page" id="settings" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Settings</h1>
</div>
<div class="BB10Container">
</div>
<div data-role="footer" data-position="fixed">
<div data-role="actionbar">
<div data-role="back"></div>
<div data-role="action">
</div>
<div data-role="action">
</div>
<div data-role="action">
<img src="images/save.png" onclick="saveoptions" alt="" />
<p>Save</p>
</div>
</div>
</div>
</div><!-- settings page -->
<!-- about us page -->
<div data-role="page" id="aboutus" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>About Us</h1>
</div>
<div class="BB10Container">
About ....
</div>
<div data-role="footer" data-position="fixed">
<div data-role="actionbar">
<div data-role="back"></div>
</div>
</div>
</div><!-- about us page -->
<!-- instructions page -->
<div data-role="page" id="instructions" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Instructions</h1>
</div>
<div class="BB10Container">
How to use ...
</div>
<div data-role="footer" data-position="fixed">
<div data-role="actionbar">
<div data-role="back"></div>
</div>
</div>
</div><!-- instructions page -->
<script>
//page opening script
$(document).bind("pageinit", function () {
$('#settings').bind("vclick", function() {
$.mobile.changePage("#settings", { transition: "slide"});
});
$('#aboutus').bind("vclick", function() {
$.mobile.changePage("#aboutus");
});
$('#instructions').bind("vclick", function() {
$.mobile.changePage("#instructions");
});
});
</script>
</body>
</html>
