Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Highlighted
Contributor
Posts: 10
Registered: ‎12-09-2012
My Device: BB10
My Carrier: Bell
Accepted Solution

issues with BB10 JQuery theme

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>

Contributor
Posts: 10
Registered: ‎12-09-2012
My Device: BB10
My Carrier: Bell

Re: issues with BB10 JQuery theme

I've figured that in the jquery bb10 theme source code, the vclick has been changed to touchend, so the file needs to be run under ripple or simulator for the event to register.