2017/03/07

How to use swipe gestures to change webpages

The original post of is at http://stackoverflow.com/questions/23797331/using-swipe-gestures-to-change-pages-in-multi-page-jquery-mobile-application.

Note that because of minor differences, the code at http://jsfiddle.net/Gajotres/JB22E/3/ doesn't work. The code below is from the stackoverflow post and has been tested to work.


The Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
    <meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
 
    <script>
        $(document).on('swipeleft', '.ui-page', function(event){    
  if(event.handled !== true) { // This will prevent event triggering more then once
            var nextpage = $.mobile.activePage.next('[data-role="page"]');
   // swipe using id of next page if exists
   if (nextpage.length > 0) {
                $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
   }
   event.handled = true;
  }
  return false;         
  });

        $(document).on('swiperight', '.ui-page', function(event){     
  if(event.handled !== true) { // This will prevent event triggering more then once      
   var prevpage = $(this).prev('[data-role="page"]');
   if (prevpage.length > 0) {
                $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
            }
   event.handled = true;
  }
  return false;            
  });
 </script>
</head>

<body>
    <div data-role="page" id="article1">
        <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
            <h1>Articles</h1>
        </div>
        <div data-role="content">
            <p>Article 1</p>
        </div>
    </div>

    <div data-role="page" id="article2">
        <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
            <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
            <h1>Articles</h1>
        </div>
        <div data-role="content">
            <p>Article 2</p>
        </div>
    </div>

    <div data-role="page" id="article3">
        <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
            <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
            <h1>Articles</h1>
        </div>
        <div data-role="content">
            <p>Article 3</p>
        </div>
    </div>

</body>
</html>

Result

Posted by at
Labels: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)