Queries on jQueryMobile Swipe

StackOverflow https://stackoverflow.com/questions/18525522

Question

I have implemented page swipe using the following code. 

<!DOCTYPE html> 
<html> 
<head> 
    <title>Swipe Example</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="cordova.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" charset="utf-8" src="jquery/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.3.2.min.js"></script>
    <script>
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        function onDeviceReady() {
            // set your swipe threshold explicitly
            $.event.special.swipe.horizontalDistanceThreshold = 120;
            $(document).on("swiperight", "#home", function() {
                $.mobile.changePage("#page1");
            });
            $(document).on("swipeleft", "#page1", function() {
                $.mobile.changePage("#home");
            });
        }
    </script>
</head> 
<body onload="onBodyLoad()">
    <div data-role="page" id="home">
        <div data-role="content">
            <p>
                <ul data-role="listview" data-inset="true" data-theme="c">
                    <li id="listitem">Swipe Right to view Page 1</li>
                </ul>
            </p>
        </div>
    </div>
    <div data-role="page" id="page1">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 1
            </p>
        </div>
    </div>
</body>

Using the above code i'm able to move front and back page by swiping.

Following are the few queries i have

  1. Suppose if have 10 pages to implement in swipe view, i need to write 15+ methods to move which page on right and left swipe. Is there any other easy option like array adapter to add all the pages?
  2. Suppose if i'm moving these pages for six times, after that if i press back key to close application, six times the two same page are displaying. But it should display only once and need to exit app on third click.
    How to implement that?
Was it helpful?

Solution

For question 1 here is a working example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet"  href="jquery.mobile-1.3.2.css">
    <script type="text/javascript" src="cordova.js"></script>
    <script src="jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
    <script src="jquery.mobile-1.3.2.min.js" language="javascript" type="text/javascript"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <title>AnimeAddicts - Menü</title>
  </head>
  <script language="javascript1.7">
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        var pageIds = new Array("#home", "#page1", "#page2", "#page3", "#page4"); // add page id's here, if page id doesn't here, it won't swipe that page
        var pageSwipeSet = new Array(new Array(), new Array()); // this is only to know, which page has swipe function. this need, because if we doesn't use this it will add more then one listener for one or more page and it will bugging
        var actPageNum = 0; // current page

        function onDeviceReady() {
            // set your swipe threshold explicitly
            $.event.special.swipe.horizontalDistanceThreshold = 120;

            swipeFunction();
        }

        function swipeFunction(){
            if(actPageNum>0 && !pageSwipeSet[0][actPageNum-1]){
                var previous = pageIds[actPageNum-1];
                var previousActual = pageIds[actPageNum];
                $(document).on("swipeleft", previousActual, function() {
                    $.mobile.changePage(previous);
                    actPageNum--;
                    swipeFunction();
                });
                pageSwipeSet[0][actPageNum-1] = true;
            }
            if(actPageNum<pageIds.length-1 && !pageSwipeSet[1][actPageNum+1]){
                var next = pageIds[actPageNum+1];
                var nextActual = pageIds[actPageNum];
                $(document).on("swiperight", nextActual, function() {
                    $.mobile.changePage(next);
                    actPageNum++;
                    swipeFunction();
                });
                pageSwipeSet[1][actPageNum+1] = true;
            }
        }
    </script>
</head> 
<body onload="onBodyLoad()">
    <div data-role="page" id="home">
        <div data-role="content">
            <p>
                <ul data-role="listview" data-inset="true" data-theme="c">
                    <li id="listitem">Swipe Right to view Page 1</li>
                </ul>
            </p>
        </div>
    </div>
    <div data-role="page" id="page1">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 1
            </p>
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 2
            </p>
        </div>
    </div>
    <div data-role="page" id="page3">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 3
            </p>
        </div>
    </div>
    <div data-role="page" id="page4">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 4
            </p>
        </div>
    </div>
</body>

This script is adding the left and right swipes when you swipes :D . Tested.

For question 2. In phonegap, you can use this event listener:

document.addEventListener("backbutton", yourCallbackFunction, false);

You need to create a history var, when you swipe on the pages, you add new elements on it. When you push the back button, you read from it, and go to that page. How much you store on it (and what you store on it), it's your choice. But I'm not sure this will working, mostly from the back button push.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top