Question

I am currently exploring jQuery Mobile’s functionalities. I am quite intrigued by the way Google Play Store handles horizontal sliding, hence, when the user slide taps to the right, the view should slide to the next page and when the user slide taps to the left the view should scroll to the previous page, if any. I know this can be done using native jQuery but I’m not yet familiar with events on mobile devices and I’m sure there is already a built-in functionality for this.

I’d like to try this first with Android devices and if possible with iPad and iPhone. Can anybody guide me on ways to accomplish this?

BTW, I’m not talking about browser history here, probably just some div, pages, if possible.

Answer 1

It can be done but you will be sadly disappointed.

It can be achieved like this:

1. Multiple page’s inside one single HTML. Every page will have swipeleft and swipe right binded to it. When event is triggered changePage() function will make a transition to previous/next page. This sounds excellent and works just fine on desktop browser but fails miserable when executed with phonegap on android phones. Transitions are still a huge problem on android phones, iOS fares better but not to much.

   Something like this:

   $('#page-two').on('#page-two', 'swipeleft', function () {
       //next page
       $.mobile.changePage($('#page-three'));
   }).on('#page-two', 'swiperight', function () {
       //prev page
       $.mobile.changePage($('#page-one'), { reverse : true });
   });
   

   Swipe events are supported with jQuery Mobile so no need for 3rd party plugins.

2. Use a jQuery Mobile carousel plugin like this example: http://jsfiddle.net/blackdynamo/yxhzU/

   Original plugin: https://github.com/blackdynamo/jQuery-Mobile-Carousel

   Unlike page transitions this plugin will give you much better feeling on mobile phones.

3. What ever path you choose android tab look will be achieved with navbar inside a second header:

   <div data-theme="a" data-role="header">
       <h3>
           First Page
       </h3>
       <a href="#second" class="ui-btn-right">Next</a>
   </div>
   <div data-theme="a" data-role="header">
       <div data-role="navbar">
           <ul>
               <li><a href="#">Page One</a></li>
               <li><a href="#">Page Two</a></li>
               <li><a href="#">Page Three</a></li>
           </ul>
       </div><!-- /navbar -->
   </div>