blackberry / jquerymobile-bb10-theme Goto Github PK

jQuery Mobile BlackBerry 10 Theme

License: Apache License 2.0

JavaScript 100.00%

jquerymobile-bb10-theme's Introduction

jQuery Mobile BlackBerry 10 Theme - Beta

Content is subject to change

BlackBerry has been committed to providing the best Web support possible for its BlackBerry platform. Part of that story is to support popular tools and frameworks that Web developers are already familiar with. Our strategy has included experimental efforts such as bbUI.js where we have honed the details of bringing the BlackBerry 10 design language to the Web, a partnership with Sencha to make sure the Sencha Touch gets first-class BlackBerry 10 support, and direct contributions and support to jQuery Mobile which today is at the forefront of open source Mobile Web development. This project is the official BlackBerry 10 Theme for jQuery Mobile, which will help developers build Web apps that sport the full BlackBerry 10 look and feel using the framework.

Live Demo best view on a BlackBerry 10 or in Chrome using the Ripple Emulator

Check out the getting started guide.

Looking for Official Icons to take your BlackBerry 10 app to the next level? Get them here.

Quick Start

<!DOCTYPE html>
<html>
<head>
	<title>My Page</title>
	<link rel="stylesheet" href="BlackBerry-JQM-all.min.css" />
	<script src="BlackBerry-JQM-all.min.js"></script>
</head>
<body>

<div data-role="page">

	<div data-role="header">
		<h1>My Title</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>Hello world</p>
	</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

All of the files you need to get started are in dist/ folder

You will notice that this example does not include jQuery or jQuery mobile, this is because all of the files need are combined into BlackBerry-JQM-all.min.css and BlackBerry-JQM-all.min.js, this is done to reduce download overhead on the device and improve overall performance. If you prefer to include each file seperatly please check out the getting started documentation.

Building the kitchenSink sample

Clone or download this repo
Zip the entire contents of the kitchenSink folder
Using BlackBerry 10 WebWorks SDK, package the zip file created in step 2
Deploy to BlackBerry 10 device (signing required) or simulator

Advanced

Information on how to modify and build this theme can be found here.

Authors

Jason Scott
Jonathan Séguin

jquerymobile-bb10-theme's People

Contributors

Stargazers

Watchers

Forkers

mdabydeen bluetouch appendto rwallace2 dslack ejzn prolove365 pravinkmrr astanley jcreamer898 muthhus hemant19cse hkao jeffatstepup pixeljo cfung76 rdavidwu digow kublaj br14 akshatg misugijunz redwolves cichonc22 sanyaade-mobiledev gr-maggi ajmalmsali marchitos rpaskowitz jasondscott awogit wilsonxp jonseg wahdankedai tcarmelveilleux theclabs wr4eng balakrishnan-s cesarh21 jaseel1 drmichaeljames emmanuellesoy tcsizmadia dennisritchie liuwt iolufemi a68225070 isport59 robmclarke dennisit bright-spark kaiserryo arunagirinathar javier2907 iquetzalcoatl

jquerymobile-bb10-theme's Issues

Change event not being fired on select's

I noticed that when using a plugin like Backbone.Stickit which binds itself to a select's change event, that using BlackBerry-jQM, no change event is triggered.

I noticed that a change in 3e3b2e8 addressed some issues with the dropdown.

Just adding select.trigger("change") fixes the issue...

select.prop('value', select.find('option:contains("' + item.text() + '")').attr('value'));
select.trigger("change");
collapse.trigger('collapse');

Thanks!

Content formatting is too small

The size of h1 h2, paragraph and so on are too small compared to headers and the rest, the text will appear almost unreadable on the high definition dev alpha display

How to indicate the active tab??

Adding a blue button may indicate that is active, but how?? which class??

Implementing a Context Menu

I am trying to implement a Context Menu on the jQuery Mobile BB10 Theme. I am assuming it is a
special instance of the Action Overflow menu.

How can I adjust the slide behavior to achieve the two states of the Context Menu without messing
up the standard definition of the Action Overflow Menu?

What is the user action that enables the narrow Context Menu?

What is the user action that causes the wider Context Menu to appear?

How to disable the Zoom for the user?

Hi, how can I disable the zoom for the user?
If I use:
the scaling on my DevAlpha is destroyed and I see the actionbar very small.

Elastic scroll affects action bar

When an action bar is present, trying to scroll down at the bottom of the page causes the action bar to go up too, revealing a black area.
Ideally, the action bar should not be affected by the elastic scroll.

Select option in Action Bar always return first value

Select option in Action Bar always return first value?????? if i make separate page just with plugins drop down than its working and return selected value.
Tryed with jquery and pure javascript.

Creating Drop Down Box Dynamically In JavaScript?

I am trying to create a drop dynamically when a page loads. I want to drop box to have a BB10 look to it but I can't get it to work. I am looping getting data from a web sql database and creating the drop down options. I then dump it into a div. This code works and creates a drop down but not with the BB10 theme. Any help would be greatly appreciated! Thanks!


function onGetAllCoursesSuccess(results) {
   var tasksHtml = '';
   var courseID = '';
   var aRow = null;
tasksHtml += 'select name="select-choice-1" id="courseName"';
for (var x = 0; x < results.rows.length; x++) {
   aRow = results.rows.item(x);
   courseID = aRow['id'];
   tasksHtml += '<option value="' + aRow['course'] + '" data-placeholder="true">' + aRow['course'] + '</option>';

}
tasksHtml += "/select";

$("#allCoursesDiv").empty(); $("#allCoursesDiv").html(tasksHtml);

App shows up as a white screen on the BB10 Alpha Simulator

So I have this problem where I keep getting a white screen for my app on the BB10 simulator. After a lot of debugging I found it has to do with my JavaScript file for my app. As soon as there's any referencing or functions that have to do with Web SQL my app doesn't work. It's just a blank white screen on the simulator. If I comment any of the code out that has to do with Web SQL the app shows up just fine.

So it has to be something to do with web works. It's not recognizing any of the Web SQL functions.

This is what my included JavaScript and CSS files look like for the head section on a page.

<link rel="stylesheet" media="screen" href="css/main.css" />
<link href="css/BlackBerry-JQM-all.css" rel="stylesheet" type="text/css" />
<script src="js/BlackBerry-JQM-all.js" type="text/javascript"></script>
<script type="text/javascript" src="local:///chrome/webworks.js"></script>
<script src="js/main.js" type="text/javascript"></script>

If I try to just include this JavaScript below in my app I get the blank white screen.

var trainXDb = openDatabase('trainXDb', '1.0', 'TrainX DB', 50 * 1024 * 1024);

I am not sure where to go from here because I know where the problem is but have no way about solving it.

Any help would be much appreciated.

Thanks!

Textarea uneditable

When I test form.html in the kitchen sink the <textarea> tag is uneditable.

When i sign app for Blackberry 10 "<input type="date">" does not work

Jason is it "<input type="date">" sported in Blackberry 10 Alfa?
It is working on Tablet.
Please let me know. Thanks

Javascript UnCheck Methods Don't Work

Have tried several ways to uncheck the JQMobile check boxes with Javascript, none seem to work.

$('input[name=checkbox]').attr('checked', false);

$("input[type='checkbox']").checkboxradio('disable');

$("input[type='checkbox']").attr("checked",false).checkboxradio("refresh");

Methods 2 & 3 return the following the Javascript Console.

TypeError: Object [object Object] has no method 'checkboxradio'

Dialog and several transitions show actionbar overflowMenu

If there is an actionbar with overflow menu, you can see the overflow menu in many undesirable situations.

For example, if you do a 'swipeup' page transition, the overflow menu is completely visible while the page fades out.
Another example, is if you do a pagechange using {role : 'dialog'}, the overflow menu is shown.
I've seen it as an artifact in a few other locations, but these two are most problematic.

When transitioning between pages, previous page scrolls up before transitioning

Multiple issues for overflow menu with example code

As mentioned in #82, I wanted to share some simple code that would demonstrate several problems we're having using the overflow menu in our project. See below the list I'm providing for the sample code

Slow navigation - overflow menus that take up more than the full screen scroll up and down surprisingly poor responsiveness. Touch scrolling up and down on a Dev Alpha B device has a framerate of around 4
Default Icon Selected - This is more of a question of "how" because it is probably implemented. In the below example, if you open up the app and select "Page 1", you'll see that the overflow icon now includes "Page 1" and also grabs the icon from the selected menu item (if it had one - which I skipped in this example for simplicity). How do you make it load the page already open to "Page 1"?
Touchstart and Touchend in menu items - If you start a touch event inside an overflow menu item and then lift your finger outside of the overflow container, the menu keeps its "selected" status. Moreover, if you start swiping left and right, you'll find that you can now start scrolling the screen left and right, which can get you into some odd invalid states quite quickly.
Scrolling and selecting menu items - In the example, given, in addition to the slow navigation when scrolling up and down the overflow menu, you'll also find that it often ends up selecting an item when you're simply trying to scroll up and down. Once you have a touchstart inside the overflow menu followed by a scroll event, it should disable any possibility for selections. This might partially be due to how I bound events to the menu items - but even if I don't bind any events, the behaviour for when it decides to close the menu is just as awkward.
Difficult to bind click events - What is the best way of assigning click events to the overflow menu? "live" vclick events don't seem to bubble up. You can't add events on pageinit, and on pagechange, you can only access the overflowMenu by doing something like $.mobile.activePage.prevSibling('.overflowMenu').find(...) - that seems unlikely to survive a refactor :)
Animations are a mess - You'll find in the example if you goto page 2 and back to page 1, the slide animations are a mess. Slideup is equally as appalling :(. The overflow menu is visible through much of the transition
See through content to overflow - in addition to animations, after navigating to page 2 and back to page 1, you may end up seeing through the content through to the overflow menu. I saw this in my app as well, although I wasn't trying to demonstrate it here, it showed up.

I'm hoping that all of these are fixed in the refactor you're working on. I started looking into workarounds, but it got messy very quickly. All these problems can be demonstrated in 100 lines of code and the app I'm writing is a bit larger than that ;)

Thanks in advance for any help you provide!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Test</title>

  <script>
    var meta = document.createElement("meta");
    meta.setAttribute('name','viewport');
    meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
    document.getElementsByTagName('head')[0].appendChild(meta);
  </script>

  <link rel="stylesheet" href="BlackBerry-JQM-all.min.css" />
  <style>
  </style>

  <script src="BlackBerry-JQM-all.js"></script>
  <script src="local:///chrome/webworks.js" type="text/javascript"></script>

  <script type="text/javascript">
    (function($) {
      $(document).on('pagechange', pageChange);

      function pageChange() {
        // Do it this way beause I cannot use $.mobile.activePage to track down
        // the tabs, unless I use prevSibling()
        $('[data-role="tab"]').each(function() {
          var tab = $(this);
          tab.off('.change-page');
          tab.on('vclick.change-page', function() {
            switch ($(this).text()) {
              case 'Page 1':
                $.mobile.changePage($('#page-1'), { transition : 'slide', reverse : true })
                break;
              case 'Page 2':
                $.mobile.changePage($('#page-2'), { transition : 'slide', reverse : false })
                break;
            }
          })
        })
      }
    })(jQuery)
  </script>
</head>

<body>
  <div data-role="page" id="page-1" data-theme="a">
    <div data-role="header" data-theme="a" data-position="fixed">
      <h1>Page 1</h1>
    </div>

    <div data-role="content">
      <p>Page 1 Content</p>
    </div>

    <div data-role="footer" data-position="fixed">
      <div data-role="actionbar">
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
      </div>
    </div>

  </div>

  <div data-role="page" id="page-2" data-theme="a">
    <div data-role="header" data-theme="a" data-position="fixed">
      <h1>Page 2</h1>
    </div>

    <div data-role="content">
      <p>Page 2 Content</p>
    </div>

    <div data-role="footer" data-position="fixed">
      <div data-role="actionbar">
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
        <div data-role="tab" data-overflow="true">Page 2</div>
        <div data-role="tab" data-overflow="true">Page 1</div>
      </div>
    </div>

  </div>
</body>
</html>

Actionbar data-overflow="true" onClick not working

To simulate this problem open kitchensink/actionbar.html

Add the following javascript to an action div

onclick="javascript:location.href='index.html'"

If the div doesn't have data-overflow="true" it works.

If it does have data-overflow="true" it doesn't work.

Internationalizing back-button

Right now I'm just adding

<div id="backButton" data-role="back" class="action-bar-back">
    <div class="action-bar-back-text">
        <p>Zur&uuml;ck</p>
    </div>
</div>

but it would be nice if it just was possible to do something like this:

<div id="backButton" data-role="back">Zur&uuml;ck</div>

At least it would be nice if it was mentioned in the docs so that others don't have to search the DOM to find out how to change it.

$('[data-role="content"]').empty(); breaks Overflow menu

Emptying the content div breaks the overflow menu because the overflow menu is a child of the content div and will therefore be deleted when calling $('[data-role="content"]').empty();

GitHub Pages

Branch should be updated to reflect latest changes.

Dialog looks really bad

Hi, is there any alternative for the dialog of jQueryMobile?
Because with this theme it looks not very well.

Resizing input fields...possibly also the drop down lists?

I noticed I cannot change the width of input fields -> or not doing it properly?

example : Apartment number may only need 4 spaces total, not the entire screen

Also I use two drop down list to pick numbers from 1 to say 50. This too takes up the whole screen width therefore takes 2 lines...any suggestions on making this fit on one?

List View that contains LInks

In the jQuery Mobile BB10 Theme, I am having a hard time trying to implement what should be a simple visual style on a listview that contains a href.

My app has two types of lists. The normal list (without links) is ok.

The list that contains a href is where my problem is. Both lists look the same and I have no way for the user to easily distinguish between a link and a non-link.

I tried several variations of placing [data-icon="arrow-r"] and [data-icon="ui-icon-arrow-r"] at both the <ul> and <li> levels.

Should I add and manipulate [class="ui-li-aside"] or [class="ui-li-count"] areas to insert an arrow image?

I know there is an easily solution to this that I am overlooking.

Form element Select menus: select via Javascript

Trying to select via value with this:

$('select#select-choice-0').val('express');
$('#select-choice-0').selectmenu();
$('#select-choice-0').selectmenu('refresh');

and the result is:

tested with normal JQueryMobile and this code works fine.

So I think it's a jQueryMobile-BB10-Theme issue.

Or exist another method?

i am using:
blackberryjqm/BlackBerry-JQM-all.min.css
blackberryjqm/BlackBerry-JQM-all.min.js

and latest DevAlpha OS and WebWorks SDK

jQM theme misbehaves when used within WebWorks v1.0.3.8

Developer reporting that the theme does not behave as expected when packaged within a BlackBerry 10 app, compiled using WebWorks v1.0.3.8.

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Blackberry-WebWorks-1-0-3-8-and-Blackberry-jQuery-mobile/td-p/2017367

Reported issues:

Actionbar tab menu appears white
data themes not being recognized

Are others seeing this as well? I've asked for web inspector console data.

Collapsible Content Blocks and dynamic content

If I update my Collapsible Content Block with new content, it looks like this:

Am I doing something wrong? Here's my code:

http://jsbin.com/eyidew/2/edit

Placing a Delete Button on Action Overflow Menu

This question concerns the jQuery Mobile BB10 Theme with an Action Overflow menu.

How can I adjust the placement of Action buttons so the Delete button is at the bottom of the list
with space to separate it from the other buttons? I'm trying to achieve what is documented in the
UI Guidelines without much success.

I think this also applies to the Context Menu, but I haven't had much luck getting a Context Menu configured in my app.

I tried inserting an "empty" button to create the space,

<div id="" data-role="action" >
       <img src="" alt="" />
       <p></p>
</div>

This gives me the empty space, but if a user clicks that space, the blue highlight appears as
though it were an active button.

If I remove the data-role="action" I lose the space.

Can I disable the blue highlight or do I need to figure out some way to overlay this area with a
new CSS declaration?

event is undefined in _setHeader of the dropdown

For whatever reason, I am using the dropdown and the event here... item = $(event.target); is undefined. It appears as though the item variable is unused anyways, so perhaps it should just be removed?

_setHeader: function(text) {
    var headerText = this.header.find('.ui-btn-text'),
            headerStatusText = headerText.find('.ui-collapsible-heading-status'),
            item = $(event.target);

    //Check if the content has been enhanced yet
    if(headerText.length === 0){
        this.header.text(text);
    } else {
        headerText.text(text).append(headerStatusText);
    }
},

CSS file reference: url('images_bb/core_title_bar_shadow_dark_flipped.png')

I am getting a minor error for a file reference in CSS.

FILE: BlackBerry-JQM-all.css
LINE 1644: url('images_bb/core_title_bar_shadow_dark_flipped.png')

I believe this line is trying to reference the following file: /dist/images_bb/core_titlebar_shadow_dark_flipped.png

CORRECTION TO LINE 1644: url('images_bb/core_titlebar_shadow_dark_flipped.png')

Small graphical glitch with tabs

This only happens since I have updated to the gold SDK if I have three tabs and the menu in my app (it's ok with two tabs + menu):

Would also be nice if the active tab would get slightly brighter like in native apps:

and slightly darker when pressed by the user:

Is Peek included in the framework?

After watching the videos from BlackBerry Jam and going through the UI Guidelines (and any other
documentation I can find), I am trying to implement the Peek function in the jQuery Mobile BB10
Theme.

Everything works great when I click the Back button on a page. (The page slides to the right to
reveal the higher level in the hierarchy.)

If the user is suppose to be able to control the Peek with their finger, should I code the Back
button to somehow move as the user moves their finger? Then I am assuming that once a threshold is reached the page continues to move to the right to reveal the underlying page?

Also, should an active touch area also be defined on the left side of the window that allows the
user to swipe across the page in a non-precise manner (as suggested in the videos)? Will this active area interfere with a bezel gesture, such as switching to another app on the PlayBook?

If Peek is suppose to be a core component in the new BB10 experience, I have a feeling developers will be all over the place with this if it is not included in the development framework. (Just a thought....)

CSS incorrectly references the core_actionbar_back_pressed without a .png ending

This is a simple Issue as described above.

Issues with tabs in actionbar

Tabs already showed in action bar, is again showed in the overflow menu.

ActionBar not working at all

I just went to the live demo turned on the Ripple Emulator and went to the ActionBar page. Doesn't seem to be working at all.

Click event on the tab overflow doesn't work

Here is the code I've made, the action works well but not on the tab.

<div data-role="actionbar">
    <div id="buttonSettings" data-role="tab" data-overflow="true">
        <img src="assets/images/button_settings.png" alt="" />
        <p>Settings</p>
    </div>
    <div id="buttonSignout" data-role="tab" data-overflow="true">
        <img src="assets/images/button_signout.png" alt="" />
        <p>Signout</p>
    </div>
    <div data-role="action" id="newAction">
        <img src="assets/images/button_new_action.png" alt="" />
        <p>New Presentation</p>
    </div>
</div>

$('#buttonSettings').click(function() {
    alert("Clicked!");
});

$('#newAction').click(function() {
    alert("Clicked!");
});

after that the overflow button of tab didn't return to normal.

Image Conversion only works if Images exist

Changes in #46 only works if the images in the dist/ folder already exists. If there's no dist folder, grunt will fail to execute, unless forced.

BB10 JQM Theme renders very large UI in Simulator

Compared to other native apps in the simulator, my BB 10 jQuery Mobile app renders a very large UI.

My App:

Native BB 10 App:

I've tried looking for a solution online but have not found one.

Also, renders large UI in browser as well.

Action-bar / Jquery changePage not working

The code below is not working. The project is a jquerymobile using bb10-theme.
The only changepage is executed is #openAboutPage which a single .html within the project and it is show as a dialog. The action bar in the footer shows the icons and looks to be ok but clicking on main, customer or contactus doesnt execute the changePage. Any clue?

<div data-role="footer" data-position="fixed">
  <div data-role="actionbar">
    <div id="o1" data-role="tab">
        <img src="logo/thumbs/icons/main.png" alt="" />
        <p>List</p>
    </div>
    <div id="o2" data-role="tab">
        <img src="logo/thumbs/icons/customer.png" alt="" />
        <p>Compose</p>
    </div>
    <div id="o4" data-role="action">
        <img src="logo/thumbs/icons/help.png" alt="" />
        <p>Help</p>
    </div>
    <div id="o5" data-role="action">
        <img src="logo/thumbs/icons/contactus.png" alt="" />
        <p>Contact us</p>
    </div>
  </div>
    <script type="text/javascript">
        $('[data-role="action"]').bind("vclick", function() {
           alert(this.id + " Clicked"); 
          switch (this.id) {
            case "o4":
              $.mobile.changePage( '#openAboutPage');
              break;
            case "o5":
              $.mobile.changePage( '#contactus');
              break;
          } 
        });
        $('[data-role="tab"]').bind("vclick", function() {
           alert(this.id + " Clicked"); 
          switch (this.id) {
            case "o1":
              $.mobile.changePage( '#main');
              break;
            case "o2":
              $.mobile.changePage( '#customer');
              break;
          } 
        });
    </script>

swipeleft and swiperight do not work on pages that have enough content that you have to scroll

The below code demonstrates the behaviour. If you run this as the index.html base in a config.xml with the appropriate jquery blackberry mobile js and and css in the same folder, you should see what I mean.

The problem is that when a screen is vertically scrollable (like the one below), then unless you swipe REALLY quickly and cross your fingers, stand on your head and wish on a star, the swipe won't get registered. Swipes in the boxed area, if they work, will cause a scroll left or right animation. You can see swipes working properly if you uncomment the line with scrollSupressionThreshold. I'm not sure if this is an appropriate workaround - maybe it's as simple as setting a better default for this value in this project?

Are touchmove events supposed to stop firing once scrolling begins? I think that makes sense, but it was my first time that it has impacted me.

I hope you can appreciate that tracking down the minimal case why swipe wasn't working here was not an easy task!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Test</title>

  <script>
    var meta = document.createElement("meta");
    meta.setAttribute('name','viewport');
    meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
    document.getElementsByTagName('head')[0].appendChild(meta);
  </script>

  <link rel="stylesheet" href="BlackBerry-JQM-all.min.css" />
  <style>
    .large-box-container {
      overflow:hidden;
    }
    .large-box {
      width:400%;
      height:100%;
      border: 1px solid gray;
      border-left:none;
      border-right:none;
      overflow-x:hidden;
     }
    .large-box .inner-box {
      width:25%;
      float:left;
      height:400px;
    }
    .big-spacer {
      margin: 40px 0;
      background: #661111;
      height:1000px;
    }
  </style>

  <script src="BlackBerry-JQM-all.js"></script>
  <script src="local:///chrome/webworks.js" type="text/javascript"></script>

  <script type="text/javascript">
    (function($) {
      $(function() {
        //$.event.special.swipe.scrollSupressionThreshold = 5;
      })
      $(document).on('pageinit', pageInit);

      function basicSwipe(goRight, container) {
        return function() {
          var itemWidth = container.width();
          var roundFunction = goRight ? Math.floor : Math.ceil;
          var adjustment = goRight ? 1 : -1;
          var currentScroll = container.scrollLeft();
          var currentItem = roundFunction(currentScroll / itemWidth);
          container.animate({scrollLeft:  (currentItem + adjustment) * itemWidth}, 500);
        }
      }

      function pageInit(e) {
        var page = $(e.target);
        page.find('.large-box-container > .large-box').each(function() {
          var container = $(this).parent();
          $(this).on('swipeleft', basicSwipe(true, container));
          $(this).on('swiperight', basicSwipe(false, container));

        })
      }
    })(jQuery)
  </script>
</head>

<body>
  <div data-role="page" id="page-1" data-theme="a">
    <div data-role="header" data-theme="a" data-position="fixed">
      <h1>Page 1</h1>
    </div>

    <div data-role="content">
      <p>Page 1 Content</p>
      <div class="large-box-container">
        <div class="large-box">
          <div class="inner-box">1</div>
          <div class="inner-box">2</div>
          <div class="inner-box">3</div>
          <div class="inner-box">4</div>
        </div>
      </div>
      <div class="big-spacer"></div>
    </div>

    <div data-role="footer" data-position="fixed">
      <div data-role="actionbar">
      </div>
    </div>

  </div>
</body>
</html>

Page Links not working..

on clicking events/villagers tab, the page is not changed

. . .

Villagers

. . .

events

.load for actionbar menu

The actionbar menu will not work when loaded in with

 $('#footer').load('includes/footer.html');

Implementing the Application Menu (Swipe-down)

I am using the recently released version of the jQuery Mobile BB10 Theme to develop my apps. I have a few questions on how to implement the Application Menu (or Swipe-down Menu):

Am I understanding the UI Guidelines correctly in that the Application Menu is no longer an overlay on top of the existing screen (as we are used to seeing in PlayBook OS 2 apps)? Is the Application Menu suppose to push the entire page (or active screen) down to display the menu buttons?
Is the Application Menu included in jQuery Mobile BB10 Theme, or do we need to implement the placement of the menu and buttons using custom code? It is fairly easy to implement this function. I just want to make sure my code matches what is in the BB10 theme.

Closing the menu

In native apps like BBM the user can click anywhere in the yellow area to close the menu, in apps that use the jQueryMobile-BB10-Theme that's not the case.
Native app:

jQueryMobile-BB10-Theme:
If the user clicks on elements like on the tab or the input area, the menu closes but it also executes the associated action like opening the keyboard or changing the tab. If the user clicks in the area of the checkboxes, the clicked checkbox gets checked and the menu remains on the screen.

Background Menu does not displaying correctly

Hello,

When the application display the menus, the background is not being well displayed, it looks like rectangles. I attached an image to show you how it's being displayed.

The theme does not work in BB10 apps?

When I pack my app as a BB10 app, I get this error:

http://i.stack.imgur.com/VRo9d.png

It looks like the spinner png in base64 is giving an error

Zoom/pan inside Jquery Mobile

It is common for apps to have a header and footer and a center area that can be zoomed/panned. Are there any blackberry 10 specific suggestions related to this? Or should I look into jQuery mobile plugins that imitate this functionality?

Action bar links not working

Hello,

I'm trying to use the Action Bar elements as in the demos I found here but the links do not work. Also, I'm having another problem with the Action Bar. When the application display a menu, the Menu Icon disappears and it is not being displayed until I tap another element in the Action Bar.

I attached an image to show you.

Listview Split Button not Displaying Correctly

Using Split buttons does not display the image and show link correctly. There is a related issue that the count bubbles do not display as well on this List Item tag.

Actionbar and keyboard

When clicking into a textfield, the keyboard comes up and the actionbar moves over the keyboard. When using my app in landscape this hides the textfield. I know that I can move the page to bring it into view via JS, but it still leaves very little room for the user to input text.
So is there a way to keep the actionbar at the bottom of the screen (beneath the keyboard)?

the overflow action on the action bar does not work

the latest version of Blackberry-JQM-all.js does not work in terms of opening the overflow action on the action bar

(resolved. see below).

Button groups not displaying properly

Can't seem to get it to work nicely with http://jsfiddle.net/Srr5y/ => HTML source is here...

When you embed in HTML the controlgroup, they show up nicely as a pair. However when I generate the controlgroup via javascript, it doesn't. Copy to HTML to file locally and you will see immediately what I mean....I have embedded CSS and JS required.