Html5 Tutorial - Future Technology

Friday 5 July 2013

PhoneGap pagination tutorial using swiping from one page to another page.


Title : Hi i am going to explain you how to navigate from one screen to other screen using swiping. Description : In PhoneGap Application there are two ways to implement pagination using swiping , one way is writing our custom code for swiping from one page to other page.another way is using jQuery Mobile framework in our script.I am using the second way to explain you and in next article i will explain you the first method. I am assuming all of you know how to import jQuery mobile libraries into our html file. Download jQuery mobile files and add them to your working folder or give reference to online repository. Here is the html code :

Index.html

  • Swipe Right to view Page 1

Yeah!
You Swiped Right to view Page 1

Here is the jQuery and javascript for activating swipe functionality.
// If you swipe your page right you screen will be filled by page1 content.
$("#listitem").swiperight(function() {
    $.mobile.changePage("#page1");
});

// If you swipe your page right you screen will be filled by page1 content.
$("#listitem").swipeleft(function() {
    $.mobile.changePage("#page2");
});

1 comment:

  1. Exactly this one i have to implement in project. So, kindly send the code details of the above mention example As soon as possible

    ReplyDelete