In our new mobile WebApp for our website www.powerhour.at which we realized with the popular jQuery Mobile Framework, we included some cool stuff. One of them is the possibility to scroll through the result entries with an easy swipe to left on the mobile phone.
With jQuery Mobile this isn´t really a problem, you just have to do implement the following code:

$(document).bind('mobileinit', function()
{
    $('.swipePage.ui-page-active').live('swipeleft', function() 
    {
        $.mobile.changePage('/url/to/your/website?page=2);
    });
});

Include this few javascript lines of code into your mobile jQuery Website. We bind the swipe Event to the active page with the class “swipePage” (because not all of our sub sites need to scroll).
If the event is triggered you just have to load the new page withe the changePage method from the jQuery Mobile framework. For a productive usage of this, the url may be dynamic and not hard coded like in our example.
A swipe able page would look something like that:

<div class="swipePage" data-role="page" data-theme="b">
    // other page objects
</div>

Of course you can also use other events to trigger the loading of a new site. For example if you would like to scroll back to the last page, you can use the “swiperight” event, so the user can switch between both pages, just with a simple swipe on the smartphone display.

A detailled documentation of the events in jQuery Mobile you can find here: http://jquerymobile.com/demos/1.0rc2/docs/api/events.html

Be Sociable, Share!

• 

Filed under: jQuery, jQuery Mobile, jQuery Mobile, mobile website, scroll through lists, swipe